@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../button/button.scss";

$ds-group-header__icon-size: 24px;

.ds-group-header {
  --group-header-background: #{$ds-color-surface-primary};
  --group-header-color: #{$ds-color-text-primary};
  --group-header-icon-color: currentColor;
  display: flex;
  // 48px height is based on the value of SenasteNytt. Useful for older browsers
  flex-basis: ds-spacing($ds-s-300);
  justify-content: space-between;
  align-items: stretch;
  background: var(--group-header-background);
  color: var(--group-header-color);
  @include ds-typography($ds-typography-functional-body-md);

  &--bottom-border {
    border-bottom: ds-border-width(xxs) solid #{$ds-color-border-primary};
    flex-basis: ds-spacing($ds-s-300) - 1px;
  }

  &--bauta {
    --group-header-background: #{$ds-color-surface-breaking};
  }

  &--toggle,
  &--arrows {
    align-items: center;
    padding-right: ds-spacing($ds-s-100);
  }

  &--arrows {
    @include ds-mq-largest-breakpoint(tablet) {
      padding-right: 0; // shows link instead of arrows so no need for extra padding
    }
  }

  .ds-group-header__right-link,
  .ds-group-header__icon,
  .ds-btn--toggle {
    flex-shrink: 0;
  }

  .ds-group-header__arrows {
    display: flex;
    flex-shrink: 0;
    align-items: center;

    .ds-btn {
      margin: ds-spacing(0 $ds-s-050);
      + .ds-btn {
        margin: ds-spacing(0 0 0 $ds-s-075);
      }
    }
  }

  .ds-btn--toggle {
    align-self: center;
  }

  .ds-group-header__right-link {
    @include ds-typography($ds-typography-functional-body-sm);
    @include ds-link($ds-link-paragraph) {
      color: var(--group-header-icon-color);
    }
  }

  .ds-group-header__icon {
    height: ds-px-to-rem($ds-group-header__icon-size);
    width: ds-px-to-rem($ds-group-header__icon-size);
    color: var(--group-header-icon-color);
  }

  .ds-group-header__href {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    padding-right: ds-spacing($ds-s-100);

    @include ds-focus(-2px);

    @include ds-link($ds-link-list);

    @include ds-hover(true) {
      text-decoration: none;

      .ds-group-header__title {
        @include ds-underline(1px, 2px);
      }

      .ds-group-header__right-link {
        @include ds-underline(2px, 1px);
      }
    }
  }

  .ds-group-header__title {
    padding: ds-spacing($ds-s-075 $ds-s-100);
    flex: 1;
    margin: 0;
    @include ds-typography($ds-typography-functional-heading-xxs, $lineHeight: $ds-lineheight-lg);
  }

  &--bottom-border .ds-group-header__title {
    padding-bottom: ds-spacing($ds-s-075) - ds-border-width(xxs);
  }

  .ds-group-header__image {
    margin-left: ds-spacing($ds-s-100);
    align-self: center;

    .picture,
    img {
      height: ds-px-to-rem($ds-group-header__icon-size);
    }

    figure {
      margin: 0;
    }

    + .ds-group-header__title {
      padding-left: ds-spacing($ds-s-075);
    }
  }
}