_AlternativeVerticals.scss

/** @define AlternativeVerticals */

$alternative-verticals-emphasized-font-weight: var(--yxt-font-weight-medium) !default;

:root {
  --yxt-alternative-verticals-emphasized-font-weight: #{$alternative-verticals-emphasized-font-weight};
}

.yxt-AlternativeVerticals
{
  font-family: var(--yxt-font-family);
  font-weight: var(--yxt-font-weight-light);
  background-color: var(--yxt-color-brand-white);
  border: var(--yxt-border-default);

  @media (min-width: $breakpoint-mobile-max) {
    margin-bottom: 24px;
  }

  &--notShowingResults
  {
    border-bottom: var(--yxt-border-default);
  }

  &-noResultsInfo {
    background-color: var(--yxt-color-brand-primary);
    color: var(--yxt-color-brand-white);
    font-size: var(--yxt-font-size-md);
    padding: calc(var(--yxt-base-spacing) / 2);

    &--emphasized {
      font-weight: var(--yxt-alternative-verticals-emphasized-font-weight);
    }

    @media (min-width: $breakpoint-mobile-max) {
      font-size: var(--yxt-font-size-xlg);
      padding: 10px 20px;
    }
  }

  &-suggestionsWrapper {
    padding: var(--yxt-base-spacing);
  }

  &-details {
    font-size: var(--yxt-font-size-md);

    &--query {
      font-weight: var(--yxt-font-weight-normal);
    }

    @media (min-width: $breakpoint-mobile-max) {
      font-size: var(--yxt-font-size-md-lg);
    }
  }

  &-suggestionsList {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  &-suggestion {
    display: flex;
    margin: calc(var(--yxt-base-spacing) * 0.75) 0;

    @media (max-width: $breakpoint-mobile-max) {
      margin: calc(var(--yxt-base-spacing) / 2) 0;
    }
  }

  &-suggestionLink {
    display: flex;
    text-decoration: none;

    > :not(:last-child) {
      margin-right: 5px;
    }

    &:hover, &:focus {
      .yxt-AlternativeVerticals-suggestionLink--copy {
        text-decoration: underline;
      }
    }

    &--copy {
      font-weight: var(--yxt-alternative-verticals-emphasized-font-weight);
    }
  }

  &-arrowIconWrapper,
  &-verticalIconWrapper {
    display: flex;
    align-items: center;
  }

  &-arrowIconWrapper {
    &,
    > * {
      width: 9px;
    }
  }

  &-universalLink {
    text-decoration: none;

    &:hover, &:focus {
      text-decoration: underline;
    }
  }

  &-universalDetails {
    font-size: var(--yxt-font-size-md);

    @media (min-width: $breakpoint-mobile-max) {
      font-size: var(--yxt-font-size-md-lg);
    }
  }

  a {
    color: var(--yxt-color-brand-primary);

    &:hover,
    &:active {
      color: var(--yxt-color-brand-hover);
    }
  }
}