@import '../config/import';
@import './forms';

.c-autocomplete {
  &__popover {
    font-size: 0.85rem;
    padding: var(--su-1);
    z-index: var(--z-popover);
    width: 250px;
    background: var(--card-bg);
    color: var(--card-color);
    border-radius: var(--radius);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
  }

  &__option {
    cursor: pointer;
    margin: 0;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--base-10);
    padding-top: var(--su-2);
    padding-bottom: var(--su-2);

    &:hover,
    &[aria-selected='true'] {
      background: var(--link-bg-hover);

      & .crayons-autocomplete__name {
        color: var(--link-color-hover);
      }
    }

    &:last-child {
      border-bottom: none;
    }
  }

  &__empty {
    display: block;
    margin: var(--su-2);
    color: var(--base-60);
    font-size: var(--fs-s);
  }
}

.c-autocomplete--multi {
  &__wrapper-border:focus-within {
    @extend %form-styling-focus;

    .c-autocomplete--multi__input {
      background-color: var(--form-bg-focus);
    }
  }

  &__input {
    background-color: var(--bg-color);
    color: var(--body-color);
    border: none;
  }

  &__wrapper-border {
    .c-autocomplete--multi__input {
      background-color: var(--form-bg);
    }
  }

  .c-btn.c-autocomplete--multi__selected {
    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &:last-child:hover,
    &:last-child:focus-visible {
      color: var(--accent-danger);
    }
  }

  .c-autocomplete--multi__popover {
    position: relative;
    max-height: 200px;
    overflow: auto;
    width: 100%;
    padding: var(--su-1);
    z-index: var(--z-elevate);
    background: var(--card-bg);
    color: var(--card-color);
    border-radius: var(--radius);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
    border: none;

    [role='option'] {
      cursor: pointer;

      &:hover,
      &[aria-selected='true'] {
        background: var(--link-bg-hover);
        color: var(--link-color-hover);
      }
    }
  }
}

/***********************************************
** TagAutocompleteOption/Selection styles ***
***********************************************/
.c-autocomplete--multi {
  &__top-tags-heading {
    padding: var(--su-3);
    font-size: var(--fs-l);
    border-bottom: 1px solid var(--base-20);
  }

  &__tag-selection {
    .c-btn {
      color: var(--base-80);
      background-color: var(--tag-bg);
    }

    .c-btn:hover:enabled,
    .c-btn:focus-visible:enabled {
      color: var(--base-80);
      background-color: var(--tag-bg-hover);
    }
  }

  &__tag-prefix {
    color: var(--tag-prefix);
  }

  &__tag-option {
    background: var(--card-bg);
    color: var(--card-color);
    padding: var(--su-3);
    border-radius: var(--radius);
  }

  &__tag-option-title {
    font-weight: var(--fw-medium);
  }

  &__tag-option-name {
    text-overflow: ellipsis;
  }

  &__tag-option:hover {
    // We try to avoid !important, but since the --tag-prefix color needs to be set inline, !important is required to temporarily change it
    --tag-prefix: var(--accent-brand-darker) !important;
    background: var(--body-bg);

    .c-autocomplete--multi__tag-option-title {
      color: var(--accent-brand-darker);
    }
  }

  [aria-selected='true'] {
    .c-autocomplete--multi__tag-option {
      --tag-prefix: var(--accent-brand-darker) !important;
      background: var(--body-bg);

      .c-autocomplete--multi__tag-option-title {
        color: var(--accent-brand-darker);
      }
    }
  }

  &__tag-option-image {
    height: 1rem;
    margin-left: var(--su-1);
  }
}
