$widget-border-color: #D7D7D7;
$widget-background-color: #F9F8F8;
$breadcrumbbg_color: #e9e9e9;
$listhover_color: #00a8d6;
$path-item-color: #FFF;//#e9e9e9;
$disabled-item-color: #e9e9e9;
$path-active-color: #005870;

.path-selector {
  margin-top: 20px;

  .path-list {
    list-style: none;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
    display: inline-block;
    border: 1px solid $widget-border-color;

    .path-list-item {
      float: left;
      margin-left: 0;
      white-space: nowrap;

      &:first-child {
        label {
          padding-left: 12px;
        }
      }
      &:last-child {
        label {
          padding-right: 16px;

          &:hover:not([disabled]) {
            color: white;
            background: $listhover_color;
          }
          &:after {
            border: 0;
            border-left: 0px solid $breadcrumbbg_color;
            &:hover { border-left-color: $listhover_color; }
          }
        }
      }

      label {
        color: black;
        font-size: 12px;
        font-weight: normal;
        font-family: "Open Sans", Helvetica, Arial, sans-serif;
        line-height: 20px;
        margin: 0;
        padding: 12px 10px 12px 30px;
        position: relative;
        background: $path-item-color;

        &.active {
          background: $path-active-color;
          color: white;
          text-shadow: 1px 1px #000;
          &:after { border-left-color: $path-active-color; };
          &:hover:after { border-left-color: $listhover_color; }
        }
        &:hover:not([disabled])  {
          background: $listhover_color;
          color: white;
          &:after { border-left-color: $listhover_color; }
        }
        &:after {
          content: " ";
          display: block;
          width: 0;
          height: 0;
          border-top: 30px solid transparent;            //Go big on the size, and let overflow hide
          border-bottom: 30px solid transparent;
          border-left: 15px solid $path-item-color;//$breadcrumbbg_color;
          position: absolute;
          top: 50%;
          margin-top: -30px;
          left: 100%;
          z-index: 102;
        }
        &:before {
          content: " ";
          display: block;
          width: 0;
          height: 0;
          border-top: 30px solid transparent;            //Go big on the size, and let overflow hide
          border-bottom: 30px solid transparent;
          border-left: 15px solid $widget-border-color;
          position: absolute;
          top: 50%;
          margin-top: -30px;
          margin-left: 1px;
          left: 100%;
          z-index: 101;
        }

        input[type="checkbox"] {
          margin: 0;
          vertical-align: middle;
          margin-right: 2px;
          margin-bottom: 1px;
        }
      }

      &.disabled-item {

        label:not(.active) {
          background: $disabled-item-color;

          &:after {
            border-left: 15px solid $breadcrumbbg_color;
          }
        }

        input[type="checkbox"] {
          display: none;
        }
      }
    }
  }
}