@use '@digdir/ds-tokens/build/tokens.scss' as tokens;
@use './typography.scss' as typography;
@use './baseline/utils.scss' as utils;

$classname: '#{utils.$prefix}-panel-link';
// Color variables
$color-background: tokens.$color-neutral-white;
$color-border: tokens.$color-interface-interaction;
$color-hover: tokens.$color-interface-interaction-light;
$color-icon: tokens.$color-neutral-grey-700;
// Size variables
$min-height-medium: tokens.$spacing-base-10;
$min-height-large: tokens.$spacing-base-14;
$min-width: calc(#{tokens.$spacing-base-8} * 10);
$size-icon-medium: tokens.$spacing-base-5;
$size-icon-large: tokens.$spacing-base-7;

$padding-left-medium: tokens.$spacing-base-4;
$padding-left-large: tokens.$spacing-base-6;
$padding-right-medium: tokens.$spacing-base-3;
$padding-right-large: tokens.$spacing-base-4;
$padding-vertical-medium: tokens.$spacing-base-1;
$padding-vertical-large: tokens.$spacing-base-2;
$padding-label-icon: tokens.$spacing-base-2;
$padding-icon-hover-offset: tokens.$spacing-base-1;

.#{$classname} {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;

  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  overflow-wrap: anywhere;

  background-color: $color-background;
  border: tokens.$border-width-default solid transparent;

  // Medium size
  min-height: $min-height-medium;
  min-width: Min(#{$min-width}, 100%);
  max-width: utils.$component-max-width;

  padding-left: $padding-left-medium;
  padding-right: $padding-right-medium;
  padding-top: $padding-vertical-medium;
  padding-bottom: $padding-vertical-medium;

  transition: all tokens.$duration-normal;
  transition-property: border-color, background-color, margin;

  // Elements
  & > &__label {
    @include typography.text-body-300();
    color: tokens.$color-text-background-light;
    padding-right: calc(#{$size-icon-medium} + #{$padding-label-icon});
  }
  & > svg {
    fill: $color-icon;

    width: $size-icon-medium;
    height: $size-icon-medium;

    flex-shrink: 0;
    flex-grow: 0;
  }
  & > svg:nth-last-of-type(2) {
    padding-right: $padding-left-medium;
  }
  & > svg:nth-last-of-type(1) {
    display: inline-block;
    position: absolute;
    right: $padding-right-medium;

    transition: right tokens.$duration-normal;
  }

  // States
  &:hover {
    border-color: $color-border;

    & > svg:nth-last-of-type(1) {
      right: calc(#{$padding-right-medium} - #{$padding-right-medium});
    }
  }
  &:active {
    border-color: $color-border;
    background-color: $color-hover;
  }

  // Size modifiers
  &--large {
    min-height: $min-height-large;
    padding-left: $padding-left-large;
    padding-right: $padding-right-large;
    padding-top: $padding-vertical-large;
    padding-bottom: $padding-vertical-large;

    & > svg:nth-last-of-type(1) {
      right: $padding-right-large;
    }

    &.#{$classname}--icon-left {
      padding-left: $padding-left-medium;
    }

    &:hover > svg:nth-last-of-type(1) {
      right: calc(#{$padding-right-large} - #{$padding-icon-hover-offset});
    }

    & > .#{$classname}__label {
      @include typography.text-body-400();
      padding-right: calc(#{$size-icon-large} + #{$padding-label-icon});
    }

    & > svg {
      width: $size-icon-large;
      height: $size-icon-large;
    }
  }
}