@use '../../button/style/themes/button-mixins.scss';
@use '../../../style/core/utilities.scss' as utilities;

@mixin tableFocusRing() {
  &::before {
    content: '';
    position: absolute;
    top: -0.5rem;
    bottom: -0.5rem;
    left: -1rem;
    right: 0.5rem;
  }
}

@mixin buttonsInTable {
  // sortable
  & > thead > tr > th#{&}--sortable,
  & &__th#{&}--sortable {
    color: var(--token-color-text-action);

    .dnb-table__sort-button.dnb-button {
      > .dnb-icon {
        opacity: 0;
        transition:
          opacity 200ms ease-out,
          transform 500ms ease-out;

        @include utilities.reducedMotion() {
          transition-duration: 0.01ms;
        }

        html[data-visual-test] & {
          transition: none;
        }
      }

      position: relative;
      z-index: 1;
      align-items: flex-end;

      // reset anchor
      box-shadow: none;

      line-height: inherit;

      margin: 0;
      padding: 0;
      padding-right: 0.5rem;

      font-weight: var(--font-weight-medium);
      text-align: inherit;
      font-size: inherit;

      .dnb-button__text {
        margin: 0;
        font-size: inherit;
        line-height: inherit;

        // underline
        &::after {
          right: 0;
        }
      }

      .dnb-button__icon {
        align-self: flex-end;
        margin-top: auto;
        margin-bottom: 0.25rem;
      }

      .dnb-button__alignment {
        vertical-align: top;
      }

      // underline
      &:not(:focus) .dnb-button__text::after {
        opacity: 1;
        color: var(--token-color-text-action);
      }

      @include utilities.hover() {
        &:not(:focus) .dnb-icon {
          opacity: 1;
        }

        // hide underline
        .dnb-button__text::after {
          opacity: 0;
        }
      }

      @include utilities.focus() {
        @include tableFocusRing();

        // focus ring
        &::before {
          right: -0.5rem;
        }

        html[data-visual-test] & .dnb-icon,
        :not(.dnb-table--active) &:active .dnb-icon {
          opacity: 1;
        }

        // show underline
        html:not([data-visual-test]) & {
          .dnb-button__text::after {
            opacity: 1;
            color: inherit;
          }

          &:not(:active) .dnb-button__text::after {
            visibility: visible;
          }
        }
      }

      @include utilities.active() {
        @include button-mixins.buttonFocusRing(
          'mouse'
        ); // also, make a mouse ring
        @include button-mixins.buttonFocusRing(
          'touch'
        ); // also, make a touch ring
        @include tableFocusRing();

        // focus ring
        &::before {
          --border-color: currentcolor;
          --border-width: 0.125rem;

          right: -0.5rem;
        }
      }

      // webkit fix
      &:hover:focus:not(:active) .dnb-button__text::after {
        visibility: hidden;
      }
    }

    &[align='right'] {
      padding-right: 0.5rem;

      .dnb-table__sort-button.dnb-button {
        flex-direction: row-reverse;

        &--tertiary.dnb-button--icon-position-right {
          padding-right: 0.5rem;

          .dnb-button__icon {
            margin-left: -0.5rem;
          }
          .dnb-button__text {
            padding-right: 0;

            &::after {
              right: 0;
            }
          }
        }
      }
    }
  }

  // active
  & > thead > tr > th#{&}--active,
  & &__th#{&}--active {
    .dnb-table__sort-button.dnb-button {
      // hide underline
      &:not(:hover) .dnb-button__text::after {
        opacity: 0;
      }

      .dnb-icon {
        opacity: 1;
      }

      // and underline on hover
      @include utilities.hover() {
        .dnb-button__text::after {
          color: var(--token-color-text-action);
          opacity: 1;
        }
      }

      @include utilities.focus() {
        // hide underline
        .dnb-button__text::after {
          opacity: 0;
        }
      }

      // webkit fix
      &:hover:focus:not(:active) .dnb-button__text::after {
        visibility: visible;
      }

      html[data-whatinput='keyboard']
        &:hover:focus
        .dnb-button__text::after {
        visibility: hidden;
      }
    }
  }
  & > thead > tr > th#{&}--reversed,
  & &__th#{&}--reversed {
    .dnb-table__sort-button.dnb-button {
      .dnb-icon {
        transform: rotate(180deg);
        transform-origin: 50% 50%;
      }
    }
  }

  & &__th,
  & > thead > tr > th {
    .dnb-table__help-button {
      margin-left: 0.5rem;
    }
  }

  & > thead > &--no-wrap &__sort-button {
    white-space: nowrap;
  }
}