@import '../style/theme/color';
@import '../style/theme/shadow';
@import '../style/theme/corner';
@import '../style/core/_font';
@import '../style/core/animation';
@import '../style/theme/z-index';

:host {
  display: block;
  outline: none;

  .devui-tags-host {
    position: relative;
    height: 100%;
    outline: none;
    background-color: $devui-base-bg;

    &:active {
      outline: 0;
    }
  }

  ::ng-deep {
    .devui-tags-host {
      .devui-toggle-menu-container {
        flex-wrap: wrap;
        align-content: flex-start;

        d-toggle-menu-search .devui-toggle-menu-search > input {
          height: 26px;
        }

        &.disabled {
          cursor: not-allowed;

          d-toggle-menu-container div.devui-toggle-menu {
            background-color: $devui-disabled-bg;
          }

          d-toggle-menu-search .devui-toggle-menu-search input {
            cursor: not-allowed;
          }
        }

        d-toggle-menu-list ul d-toggle-menu-list-item .devui-dropdown-item:not(.disabled) {
          &:active,
          &:active:hover {
            color: $devui-list-item-hover-text;
            background-color: $devui-list-item-hover-bg;
          }
        }
      }

      &.init-inline {
        height: 28px;
        border-radius: $devui-border-radius;
        border: solid 1px $devui-form-control-line;

        div.devui-toggle-menu-container {
          justify-content: flex-start;
          flex-wrap: nowrap;
          overflow: hidden;
          border: none;
          padding-bottom: 12px;

          &:hover {
            overflow-x: auto;
            overflow-x: overlay;
          }

          d-toggle-menu-label {
            width: auto;
            max-width: none;
            background-color: transparent;

            ul.devui-select-tag-list {
              white-space: nowrap;
            }
          }

          d-toggle-menu-search .devui-toggle-menu-search {
            min-width: 160px;
          }
        }
      }

      &.multi-inline {
        d-toggle-menu-label {
          width: 100%;
          border-radius: $devui-border-radius;
          background-color: $devui-base-bg;
        }
      }

      &:not(.devui-gray-style.multi-inline) .devui-toggle-menu-container {
        background-color: transparent !important;
      }

      &.devui-gray-style {
        d-toggle-menu-label,
        .devui-toggle-menu-search > input[class*='devui-']:not([disabled]) {
          background-color: transparent !important;
        }

        &.init-inline,
        &.multi-inline .devui-toggle-menu-container {
          background-color: $devui-gray-form-control-bg;
          border-color: transparent;
          transition: all $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;

          &.disabled {
            background-color: $devui-disabled-bg;
          }

          &:not(.disabled) {
            &:hover {
              background-color: $devui-gray-form-control-hover-bg;
            }

            &:focus-within {
              background-color: $devui-base-bg;
              border-color: $devui-brand;
            }
          }
        }
      }
    }
  }
}

::ng-deep {
  .devui-dropdown-menu {
    d-toggle-menu-list-item .devui-dropdown-item:not(.disabled) {
      &:active,
      &:active:hover {
        color: $devui-list-item-hover-text;
        background-color: $devui-list-item-hover-bg;
      }
    }

    .devui-tags-create-item {
      float: right;
      font-size: $devui-font-size;
      color: $devui-placeholder;
    }
  }
}
