@use '_focus' as *;
@use '_helpers' as *;
@use '_high-contrast' as *;
@use '_hover' as *;
@use '../spacing' as *;
@use '../theme' as *;
@use '../text' as *;
@use '../transition' as *;
@use '../spacing' as *;

$link-button-size-small: px-to-rem($spacing-32);
$link-button-size-medium: px-to-rem($spacing-48);



@mixin link-button-padding-medium {
  
  padding-block-start: adjust-spacing-for-border-1($spacing-12);
  padding-block-end: adjust-spacing-for-border-1($spacing-12);
  padding-inline-start: adjust-spacing-for-border-1($spacing-24);
  padding-inline-end: adjust-spacing-for-border-1($spacing-24);
}

@mixin link-button-padding-small {
  
  padding-block-start: adjust-spacing-for-border-1($spacing-6);
  padding-block-end: adjust-spacing-for-border-1($spacing-6);
  padding-inline-start: adjust-spacing-for-border-1($spacing-16);
  padding-inline-end: adjust-spacing-for-border-1($spacing-16);
}

@mixin link-button-base($theme: 'light') {
  @include focus($theme: $theme);
  & {
    @include utility-medium-bold;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-width: $spacing-1;
    border-style: solid;
    border-color: transparent;
    gap: $spacing-8;
    transform: translate3d(0px, 0px, 0px);
    overflow-wrap: break-word;
    text-align: left;
    text-decoration: none;
    background-color: transparent;
    cursor: pointer;
    @include transition((background-color, border-color, color));
  }
}

@mixin link-button-size($size: 'medium') {
  & {
    @if $size == 'medium' {
      min-height: $link-button-size-medium;
      min-width: $link-button-size-medium;
      @include link-button-padding-medium;
      &::before {
        right: -($spacing-12);
        left: -($spacing-12);
      }
    } @else if $size == 'small' {
      min-height: $link-button-size-small;
      min-width: $link-button-size-small;
      @include link-button-padding-small;
      &::before {
        right: -($spacing-8);
        left: -($spacing-8);
      }
    }
  }
}

@mixin link-button-variant(
  $variant: 'filled',
  $theme: 'light',
  $isFlush: false
) {
  & {
    @if $variant == 'highlight' {
      background-color: $theme-light-background-color-brand;
      color: $theme-light-content-color-primary;

      @include hover-media-query {
        &:hover {
          background-color: $theme-light-background-color-brand-hover;
        }
      }
    } @else if $variant == 'filled' {
      background-color: $theme-light-background-color-primary-inverse;
      color: $theme-light-content-color-primary-inverse;

      @include hover-media-query {
        &:hover {
          background-color: $theme-light-background-color-primary-inverse-hover;
        }
      }
    } @else if $variant == 'outline' {
      border-color: $theme-light-border-color-primary;
      color: $theme-light-content-color-primary;

      @include hover-media-query {
        &:hover {
          background-color: $theme-light-background-color-transparent-hover;
        }
      }
    } @else if $variant == 'ghost' {
      color: $theme-light-content-color-primary;
      @if $isFlush == false {
        @include hover-media-query {
          &:hover {
            background-color: $theme-light-background-color-transparent-hover;
          }
        }
      } @else if $isFlush == true {
        & {
          
          padding-inline-start: 0;
          padding-inline-end: 0;
          
          min-width: $spacing-0;

          &::before {
            content: '';
            position: absolute; 
            top: -($spacing-1);
            bottom: -($spacing-1);
            @include transition((background-color, color));
          }
        }

        @include focus-pseudo($theme);

        @include hover-media-query {
          &:hover::before {
            background-color: $theme-light-background-color-transparent-hover;
            @include high-contrast-media-query {
              background-color: transparent;
            }
          }
        }
      }
    }

    @if $theme == 'dark' {
      @if $variant != 'ghost' {
        @include focus($theme);
      }
      & {
        
        @if $variant == 'filled' {
          background-color: $theme-dark-background-color-primary-inverse;
          color: $theme-dark-content-color-primary-inverse;
          @include hover-media-query {
            &:hover {
              background-color: $theme-dark-background-color-primary-inverse-hover;
            }
          }
        } @else if $variant == 'outline' {
          border-color: $theme-dark-border-color-primary;
          color: $theme-dark-content-color-primary;
          @include hover-media-query {
            &:hover {
              background-color: $theme-dark-background-color-transparent-hover;
            }
          }
        } @else if $variant == 'ghost' {
          color: $theme-dark-content-color-primary;

          @if $isFlush == false {
            @include hover-media-query {
              &:hover {
                background-color: $theme-dark-background-color-transparent-hover;
              }
            }
          } @else if $isFlush == true {
            @include hover-media-query {
              &:hover::before {
                background-color: $theme-dark-background-color-transparent-hover;
                @include high-contrast-media-query {
                  background-color: transparent;
                }
              }
            }
          }
        }
      }
    }
  }

  
  @include high-contrast-media-query {
    background-color: Canvas !important;
    &:hover {
      border-color: Highlight;
    }
  }
}