.q-cascader {
  position: relative;
  display: inline-block;
  width: 100%;
  font-size: var(--font-size-base);

  &:not(.q-cascader_disabled):hover {
    .q-input__inner {
      cursor: pointer;
    }
  }

  .q-input {
    cursor: pointer;

    &__inner {
      text-overflow: ellipsis;
    }

    &__icon {
      &::before {
        font-size: 24px;
      }

      &:hover {
        color: var(--color-primary-blue);
        background-color: unset;
      }
    }

    .q-icon-triangle-down {
      transition: transform 0.3s;

      &_reverse {
        transform: rotateZ(180deg);
      }
    }

    &_hover {
      .q-input__inner {
        background-color: var(--field-background-color-hover);
      }
    }

    &_focus {
      .q-input__inner {
        background-color: var(--color-tertiary-gray-ultra-light);
        box-shadow: var(--box-shadow-focus);
      }
    }
  }

  &__dropdown {
    position: relative;
    z-index: 100;
  }

  &__tags {
    position: absolute;
    top: 50%;
    right: 30px;
    left: 8px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    line-height: normal;
    text-align: left;
    transform: translateY(-50%);

    .q-tag {
      max-width: calc(100% - 15px);
      margin: 2px 0 2px 8px;
      line-height: var(--line-height-base);
      color: var(--color-opacity-gray-dark);
      text-overflow: ellipsis;
      background: var(--color-tertiary-gray-darker);
      border: none;
      border-radius: 2px;

      .q-cascader__tag-text {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .q-icon-close {
        position: relative;
        top: 0;
        flex: none;
        border-radius: unset;

        &:hover {
          color: var(--color-primary-blue);
          background-color: unset;
        }

        &::before {
          font-size: 16px;
        }
      }
    }
  }

  &__search-input {
    flex: 1;
    box-sizing: border-box;
    min-width: 60px;
    height: 24px;
    margin: 2px 0 2px 15px;
    padding: 0;
    border: none;
    outline: none;
  }
}

.q-cascader-panel {
  display: none;

  &[data-show] {
    display: flex;
    border-radius: var(--border-radius-base);
  }
}

@import './q-cascader-menu.scss';
