@use '../../global/scss/tools' as nsw;

.nsw-tooltip,
.nsw-toggletip {
  white-space: nowrap;
  border-bottom: 2px dotted var(--nsw-brand-dark);

  &:focus,
  &:active {
    @include nsw.nsw-focus;

    .nsw-section--invert & {
      @include nsw.nsw-focus($color: var(--nsw-focus-light));
    }
  }

  &__element {
    display: none;
    width: max-content;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 260px;
    border-radius: var(--nsw-border-radius);
    box-shadow: var(--nsw-box-shadow);
    line-height: var(--nsw-line-height-md-desktop);

    @include nsw.z-index('upper');
    @include nsw.font-size('xs');

    &:focus,
    &:active {
      @include nsw.nsw-focus;
    }

    &--dark {
      background-color: var(--nsw-grey-02);
      color: var(--nsw-text-light);

      a {
        @include nsw.link-light();

        &:focus,
        &:active {
          @include nsw.nsw-focus(true, var(--nsw-text-light));
        }
      }

      .nsw-icon-button {
        color: var(--nsw-text-light);
        text-decoration: none;

        @include nsw.link-light();
      }
    }

    &--light {
      background-color: var(--nsw-white);
      color: var(--nsw-text-dark);

      a {
        @include nsw.link;

        &:focus,
        &:active {
          @include nsw.nsw-focus;
        }
      }

      .nsw-icon-button {
        color: var(--nsw-brand-dark);
        text-decoration: none;

        @include nsw.link-dark;
      }

      .nsw-tooltip__arrow,
      .nsw-toggletip__arrow {
        background-color: var(--nsw-white);
      }
    }

    &.active {
      display: inline-block;
    }
  }

  &__arrow {
    position: absolute;
    background-color: var(--nsw-grey-02);
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
  }

  .nsw-section--invert & {    
    border-bottom: 2px dotted var(--nsw-text-light);
  }
}

.nsw-tooltip {
  cursor: help;

  &__element {
    padding: nsw.rem(8px);

    @include nsw.breakpoint('lg') {
      padding: nsw.rem(16px);
    }
  }
}

.nsw-toggletip {
  cursor: pointer;

  &__element {
    &:focus,
    &:active {
      .nsw-section--invert & {
        @include nsw.nsw-focus($color: var(--nsw-focus-light));
      }
    }
  }

  &__header {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .nsw-icon-button {
      margin: nsw.rem(6px) nsw.rem(6px) 0 nsw.rem(8px);

      .nsw-material-icons {
        font-size: var(--nsw-font-size-sm-mobile);
    
        @include nsw.breakpoint('lg') {
          font-size: var(--nsw-font-size-sm-desktop);
        }
      }
    }
  }

  &__content {
    padding: 0 nsw.rem(16px) nsw.rem(16px);
    
    &:first-child {
      margin-top: 0;
    }
  }
}