// Term base style (with and without links), Facets

.field--name-field-a11y-features .field__item,
.taxonomy-term--tag,
.reference--taxonomy_term > a, // Tag-Links
.taxonomy-term--tagwrapper .taxonomy-term--tag, // Buttons in image teasers
.facet-item a {
  background: var(--color-bg-slight-contrast);
  border: 1px solid var(--color-bg-slight-contrast);
  border-radius: .75rem;
  color: var(--color-text);
  display: inline-block;
  line-height: 1;
  margin: 0 var(--grid-gutter) var(--grid-gutter) 0;
  padding: .25rem 2rem;
  text-decoration: none;
}

.term--view-mode-teaser .field--name-field-mood-image {
  aspect-ratio: 16/9;
}


// Term-Links design
.taxonomy-term--tag,
.reference--taxonomy_term > a, // Tag-Links
.taxonomy-term--tagwrapper .taxonomy-term--tag, // Buttons in image teasers
.facet-item a {
  color: var(--color-link);

  &:hover,
  &:focus,
  &.is-active {
    background: var(--color-interaction);
    border-color: var(--color-interaction);
    color: var(--color-text-inverted);
  }

  &:active {
    background: var(--color-bg-light);
    border-color: transparent;
    outline: var(--outline-active);
    color: var(--color-interaction) !important;
  }
}

// Tags
.reference--taxonomy_term {
  display: inline-block;
}

.taxonomy-term.term--view-mode-teaser {
  .field {
    margin: 0;
  }

  .content.with-image {
    overflow: hidden;
    position: relative;

    .with-image--placeholder {
      aspect-ratio: 16/9;
      height: auto;
      width: 100%;
    }

    .taxonomy-term--tagwrapper {
      align-items: center;
      display: flex;
      height: 100%;
      justify-content: center;
      left: 0;
      padding: 0 .5rem;
      position: absolute;
      top: 0;
      width: 100%;

      &:before {
        background-color: var(--color-bg-dark);
        content: '';
        height: 100%;
        left: 0;
        opacity: .4;
        position: absolute;
        top: 0;
        transition: opacity 300ms;
        width: 100%;
        z-index: 1;
      }

      &:focus:before,
      &:hover:before {
        opacity: .1;
      }
    }

    img {
      aspect-ratio: 16/9;
      height: auto;
      vertical-align: bottom;
      width: 100%;
      transition: transform 300ms ease;
      @media (prefers-reduced-motion: reduce) {
        transition-duration: 10ms;
      }
    }

    .taxonomy-term--tag {
      margin: 0;
      text-align: center;
      z-index: 2;
    }

    &:focus-within,
    &:hover {
      cursor: pointer;

      img {
        transform: scale(1.2);
        width: 100%;
        height: auto;
      }

      @media (prefers-reduced-motion: reduce) {
        img {
          transform: scale(1);
        }
      }


      .taxonomy-term--tag {
        background: var(--color-text-muted);

        &:active {
          text-decoration: underline;
        }
      }

      .taxonomy-term--tag {
        background: var(--color-interaction);
        border-color: var(--color-text-inverted);
        color: var(--color-text-inverted);
      }
    }

    &:active {
      .taxonomy-term--tag {
        background: var(--color-text-inverted);
        border: 1px dashed var(--color-interaction);
        color: var(--color-interaction);
      }
    }
  }
}

// Facets

.facet-item a {
  background-color: var(--color-bg-light);
  border-color: var(--color-link);
}
