//
// Amasty AdvancedMSI
// ______________________________

//
// Variables
// ------------------------------
@am-link-color: #222;
@am-border: #aaa;
@am-background: #dadada;
@am-color: #212121;
@am-border-color: #6d95e0;
@am-state-border: #999;
@am-hover-background: #bbcef1;

//
// Common
// -----------------------------

& when (@media-common = true) {
  ul.tagit {
    & {
      background: inherit;
      border: 1px solid #C6C6C6;
      margin-right: inherit;
      overflow: auto;
      padding: 1px 5px;
    }

    li {
      display: block;
      float: left;
      margin: 2px 5px 2px 0;
    }

    li.tagit-choice {
      & {
        border-radius: 6px;
        background-color: #DEE7F8 !important;
        background: none;
        border: 1px solid #CAD8F3;
        font-weight: normal;
        line-height: inherit;
        position: relative;
      }

      a.tagit-label {
        cursor: pointer;
        text-decoration: none;
      }

      .tagit-close {
        cursor: pointer;
        line-height: 17px;
        margin-top: -8px;
        position: absolute;
        right: .4em;
        top: 50%;
      }

      .tagit-close .text-icon {
        color: #777;
        display: inline;
        font-family: arial, sans-serif;
        font-size: 16px;
        line-height: 16px;
      }

      input {
        display: block;
        float: left;
        margin: 2px 5px 2px 0;
      }

      .tagit-label {
        &:not(a) {
          color: #555;
        }
      }

      a.tagit-close {
        text-decoration: none;
      }

      a.tagit-close .text-icon {
        &:hover {
          .lib-css(color, @am-link-color);
        }
      }

      .ui-icon {
        display: none;
      }

      &:hover {
        .lib-css(background-color, @am-hover-background);
        .lib-css(border-color, @am-border-color);
      }

      a.tagLabel {
        &:hover {
          .lib-css(color, @am-link-color);
        }
      }
    }

    li.tagit-choice-read-only {
      padding: .2em .5em;
    }

    li.tagit-choice-editable {
      padding: .2em 18px .2em .5em;
    }

    li.tagit-new {
      padding: .25em 4px .25em 0;
      width: 250px;
    }

    input[type="text"] {
      box-shadow: none;
      box-sizing: border-box;
      background-color: inherit;
      background: none;
      border: none;
      color: #333;
      margin: 0;
      outline: none;
      padding: 0;
      width: inherit;
    }

    li.tagit-choice.remove {
      .lib-css(background-color, @am-hover-background);
      .lib-css(border-color, @am-border-color);
    }
  }

  input.tagit-hidden-field {
    display: none;
  }

  .ui-widget {
    font-size: 1.1em;
  }

  .tagit-autocomplete.ui-autocomplete {
    cursor: default;
    position: absolute;
    width: 1px;
  }

  .tagit-autocomplete.ui-menu {
    & {
      display: block;
      float: left;
      list-style: none;
      margin: 0;
      padding: 2px;
    }

    .ui-menu {
      margin-top: -3px;
    }

    .ui-menu-item {
      clear: left;
      float: left;
      margin: 0;
      padding: 0;
      width: 100%;
      zoom: 1;
    }

    .ui-menu-item a {
      display: block;
      line-height: 1.5;
      padding: .2em .4em;
      text-decoration: none;
      zoom: 1;
    }
  }

  .tagit-autocomplete {
    .ui-menu {
      .ui-menu-item a.ui-state-hover {
        font-weight: normal;
        margin: -1px;
      }

      .ui-menu-item a.ui-state-active {
        font-weight: normal;
        margin: -1px;
      }
    }

    .ui-corner-all {
      border-radius: 4px;
    }

    .ui-state-hover {
      .lib-css(background, @am-background);
      .lib-css(border, 1px solid @am-state-border);
      .lib-css(color, @am-color);
      font-weight: normal;
    }

    .ui-state-focus {
      .lib-css(background, @am-background);
      .lib-css(border, 1px solid @am-state-border);
      .lib-css(color, @am-color);
      font-weight: normal;
    }

    .ui-state-active {
      .lib-css(border, 1px solid @am-border);
    }

    .ui-widget-content {
      .lib-css(border, 1px solid @am-border);
    }
  }

  .tagit-autocomplete.ui-widget-content {
    background: #fff 50% 50% repeat-x;
    .lib-css(border, 1px solid @am-border);
    .lib-css(color, @am-link-color);
  }

  .tagit-autocomplete.ui-corner-all {
    border-radius: 4px;
  }

  .tagit {
    .ui-helper-hidden-accessible {
      clip: rect(1px, 1px, 1px, 1px);
      position: absolute !important;
    }
  }
}