@import 'global-typography';

$P40: var(--s1-P-40-color);
$P50: var(--s1-P-50-color);
$N0: var(--s1-N-0-color);
$N30: var(--s1-N-30-color);
$N40: var(--s1-N-40-color);
$N90: var(--s1-N-90-color);
/**We should use S50 despite we use the var N80. we will replace the N80 after we will update the S50 to be N80 hex color*/
$S50: var(--s1-N-80-color);

$padding-large: 6px 16px;
$padding-large-outline: 6px 15px;
$padding-large-icon-btn: 8px;
$padding-small: 3px 12px;
$padding-outline-small: 3px 11px;
$padding-small-icon-btn: 6px;
$large-height: 32px;
$small-height: 24px;
$large-font-size: 13px;
$small-font-size: 11px;
$icon-top: 1px;
$icon-left: 1px;
$large-min-width: 72px;
$small-min-width: 64px;
$min-width-icon-btn: 0;
$large-icon-size: 11.5px;
$small-icon-size: 11.5px;
$large-icon-only-width: 32px;
$small-icon-only-width: 24px;

@mixin s1-btn($padding, $bg-color, $height, $min-width, $box-shadow: var(--s1-shadow-2)) {
  padding: $padding;
  background-color: $bg-color;
  height: $height;
  line-height: $height;
  min-width: $min-width;
  border-radius: 3px;
  box-sizing: border-box;
  display: inline-flex;
  gap: 0 8px;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  &:active,
  &:focus {
    outline: 0;
  }

  /**START: IN CASE MATERIAL*/
  &:not([class*='mat-elevation-z']) {
    box-shadow: none;
  }

  @if $box-shadow {
    &:not(.mat-button-disabled):active:not([class*='mat-elevation-z']) {
      box-shadow: $box-shadow;
    }
  }

  .mat-button-focus-overlay {
    display: none;
  }
  /**END: IN CASE MATERIAL*/
}

@mixin s1-btn-text($size, $color) {
  font-size: $size;
  color: $color;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-align: center;
  width: fit-content;
}

@mixin s1-btn-active() {
  transition: box-shadow 0.1s ease-in-out;

  &:active:not(:disabled) {
    box-shadow: var(--s1-shadow-2);
  }
}

@mixin s1-icon-of-btn($size, $top, $color: currentColor, $left: false) {
  i,
  .s1-btn-icon {
    font-size: $size;
    top: $top;
    color: $color;
    position: relative;
    @if $left {
      left: $left;
    }
  }
}

@mixin s1-base-disabled-btn($color) {
  &:disabled,
  &[disabled],
  &.disabled {
    color: $color;
    cursor: auto;
    pointer-events: none;
    @content;
  }
}

/**MIXIN FULL*/
@mixin s1-btn-full {
  border: 0;
  transition: background-color 0.1s ease-in-out;

  &:focus-visible:not(:disabled) {
    background-color: var(--s1-P-90-color);
  }
}

@mixin s1-btn-hover-full($bg-color) {
  transition: background-color 0.3s ease-in-out;

  &:hover:not(:disabled) {
    background-color: $bg-color;
  }
}

@mixin s1-btn-disabled-full($color, $bg-color) {
  @include s1-base-disabled-btn($color) {
    background-color: $bg-color;
  }
}

/**MIXIN OUTLINE*/
@mixin s1-btn-outline {
  border: 1px solid currentcolor;
  transition: color 0.1s ease-in-out;

  &:focus-visible:not(:disabled) {
    color: var(--s1-P-90-color);
  }
}

@mixin s1-btn-hover-outline($color) {
  transition: color 0.3s ease-in-out, border 0.3s ease-in-out;

  &:hover:not(:disabled) {
    color: $color;
  }

  &:focus-visible:not(:disabled) {
    color: var(--s1-P-90-color);

    i,
    .s1-btn-icon {
      color: var(--s1-P-90-color);
    }
  }
}

@mixin s1-btn-disabled-outline($color) {
  @include s1-base-disabled-btn($color);
}

/**MIXIN LINK*/
@mixin s1-btn-link($height) {
  height: $height;
  line-height: $height;
  cursor: pointer;
  border: 0;
  box-sizing: border-box;
  background-color: transparent;
  display: inline-flex;
  gap: 0 8px;
  align-items: center;

  &:active,
  &:focus {
    outline: 0;
  }

  &:focus-visible:not(:disabled) {
    color: var(--s1-P-90-color);

    i,
    .s1-btn-icon {
      color: var(--s1-P-90-color);
    }
  }
}

@mixin s1-btn-hover-link($color) {
  transition: color 0.3s ease-in-out;

  &:hover:not(:disabled) {
    color: $color;

    i,
    .s1-btn-icon {
      color: $color;
    }
  }
}

@mixin s1-btn-disabled-link($color, $if-underline) {
  @include s1-base-disabled-btn($color) {
    i,
    .s1-btn-icon {
      color: $color;
    }

    @if ($if-underline) {
      text-decoration: underline $color;
      text-underline-offset: 3px;

      &:hover {
        color: $color;
        text-decoration: underline $color;
      }
    }
  }
}

@mixin s1-link-underline {
  text-decoration: underline var(--s1-P-40-color);
  text-underline-offset: 3px;
  transition: color 0.1s ease-in-out;

  &:hover {
    color: var(--s1-P-50-color);
    text-decoration: underline var(--s1-P-50-color);
  }

  &:focus-visible:not(:disabled) {
    text-decoration: underline var(--s1-P-90-color);
  }
}

@mixin s1-secondary-link-text {
  @include s1-base-disabled-btn($N40) {
    .s1-secondary-link-text {
      text-decoration: underline var(--s1-N-40-color);
    }
  }

  .s1-secondary-link-text {
    text-decoration: underline var(--s1-P-40-color);
    text-underline-offset: 3px;
    transition: color 0.1s ease-in-out;
  }

  &:hover {
    .s1-secondary-link-text {
      color: var(--s1-P-50-color);
      text-decoration: underline var(--s1-P-50-color);
    }
  }

  &:focus-visible:not(:disabled) {
    .s1-secondary-link-text {
      text-decoration: underline var(--s1-P-90-color);
    }
  }
}

/**MIXIN ICON ONLY*/
@mixin s1-icon-btn-only($width) {
  width: $width;
}

/**LARGE PRIMARY FULL BUTTON*/
.s1-btn-large-primary-full {
  @include s1-btn($padding-large, $P40, $large-height, $large-min-width);
  @include s1-btn-text($large-font-size, $N0);
  @include s1-btn-active;
  @include s1-btn-full;
  @include s1-btn-hover-full($P50);
  @include s1-btn-disabled-full($N0, $N30);
  @include s1-icon-of-btn($large-icon-size, $icon-top);
}

/**LARGE PRIMARY OUTLINE BUTTON*/
.s1-btn-large-primary-outline {
  @include s1-btn($padding-large-outline, $N0, $large-height, $large-min-width);
  @include s1-btn-text($large-font-size, $P40);
  @include s1-btn-active;
  @include s1-btn-outline;
  @include s1-btn-hover-outline($P50);
  @include s1-btn-disabled-outline($N40);
  @include s1-icon-of-btn($large-icon-size, $icon-top);
}

/**LARGE PRIMARY LINK BUTTON*/
.s1-btn-large-primary-link {
  @include s1-btn-text($large-font-size, $P40);
  @include s1-btn-link($large-height);
  @include s1-btn-hover-link($P50);
  @include s1-btn-disabled-link($N40, false);
  @include s1-icon-of-btn($large-icon-size, $icon-top);
  padding: 0;
}

/**LARGE SECONDARY FULL BUTTON*/
.s1-btn-large-secondary-full {
  @include s1-btn($padding-large, $S50, $large-height, $large-min-width);
  @include s1-btn-text($large-font-size, $N0);
  @include s1-btn-active;
  @include s1-btn-full;
  @include s1-btn-hover-full($P50);
  @include s1-btn-disabled-full($N0, $N30);
  @include s1-icon-of-btn($large-icon-size, $icon-top);
}

/**LARGE SECONDARY OUTLINE BUTTON*/
.s1-btn-large-secondary-outline {
  @include s1-btn($padding-large-outline, $N0, $large-height, $large-min-width);
  @include s1-btn-text($large-font-size, $S50);
  @include s1-btn-active;
  @include s1-btn-outline;
  @include s1-btn-hover-outline($P50);
  @include s1-btn-disabled-outline($N40);
  @include s1-icon-of-btn($large-icon-size, $icon-top);
}

/**LARGE SECONDARY LINK BUTTON*/
.s1-btn-large-secondary-link {
  @include s1-btn-text($large-font-size, $S50);
  @include s1-btn-link($large-height);
  @include s1-btn-hover-link($P50);
  @include s1-btn-disabled-link($N40, true);
  @include s1-icon-of-btn($large-icon-size, $icon-top, $P40);
  @include s1-link-underline;
  padding: 0;
}

/**SMALL SECONDARY LINK ICON BUTTON*/
.s1-btn-large-secondary-link-icon {
  @include s1-btn-text($large-font-size, $S50);
  @include s1-btn-link($large-height);
  @include s1-btn-hover-link($P50);
  @include s1-btn-disabled-link($N40, false);
  @include s1-icon-of-btn($large-icon-size, $icon-top, $P40);
  @include s1-secondary-link-text;
  padding: 0;
}

/**SMALL PRIMARY FULL BUTTON*/
.s1-btn-small-primary-full {
  @include s1-btn($padding-small, $P40, $small-height, $small-min-width);
  @include s1-btn-text($small-font-size, $N0);
  @include s1-btn-active;
  @include s1-btn-full;
  @include s1-btn-hover-full($P50);
  @include s1-btn-disabled-full($N0, $N30);
  @include s1-icon-of-btn($small-icon-size, $icon-top);
}

/**SMALL PRIMARY OUTLINE BUTTON*/
.s1-btn-small-primary-outline {
  @include s1-btn($padding-outline-small, $N0, $small-height, $small-min-width);
  @include s1-btn-text($small-font-size, $P40);
  @include s1-btn-active;
  @include s1-btn-outline;
  @include s1-btn-hover-outline($P50);
  @include s1-btn-disabled-outline($N40);
  @include s1-icon-of-btn($small-icon-size, $icon-top);
}

/**SMALL PRIMARY LINK BUTTON*/
.s1-btn-small-primary-link {
  @include s1-btn-text($small-font-size, $P40);
  @include s1-btn-link($small-height);
  @include s1-btn-hover-link($P50);
  @include s1-btn-disabled-link($N40, false);
  @include s1-icon-of-btn($small-icon-size, $icon-top);
  padding: 0;
}

/**SMALL SECONDARY FULL BUTTON*/
.s1-btn-small-secondary-full {
  @include s1-btn($padding-small, $S50, $small-height, $small-min-width);
  @include s1-btn-text($small-font-size, $N0);
  @include s1-btn-active;
  @include s1-btn-full;
  @include s1-btn-hover-full($P50);
  @include s1-btn-disabled-full($N0, $N30);
  @include s1-icon-of-btn($small-icon-size, $icon-top);
}

/**SMALL SECONDARY OUTLINE BUTTON*/
.s1-btn-small-secondary-outline {
  @include s1-btn($padding-outline-small, $N0, $small-height, $small-min-width);
  @include s1-btn-text($small-font-size, $S50);
  @include s1-btn-active;
  @include s1-btn-outline;
  @include s1-btn-hover-outline($P50);
  @include s1-btn-disabled-outline($N40);
  @include s1-icon-of-btn($small-icon-size, $icon-top);
}

/**SMALL SECONDARY LINK BUTTON*/
.s1-btn-small-secondary-link {
  @include s1-btn-text($small-font-size, $S50);
  @include s1-btn-link($small-height);
  @include s1-btn-hover-link($P50);
  @include s1-btn-disabled-link($N40, true);
  @include s1-icon-of-btn($small-icon-size, $icon-top);
  @include s1-link-underline;
  padding: 0;
}

/**SMALL SECONDARY LINK ICON BUTTON*/
.s1-btn-small-secondary-link-icon {
  @include s1-btn-text($small-font-size, $S50);
  @include s1-btn-link($small-height);
  @include s1-btn-hover-link($P50);
  @include s1-btn-disabled-link($N40, false);
  @include s1-icon-of-btn($small-icon-size, $icon-top, $P40);
  @include s1-secondary-link-text;
  padding: 0;
}

/**-------------------ICON ONLY-------------------*/

/**LARGE PRIMARY FULL ICON BUTTON*/
.s1-icon-btn-large-primary-full {
  @include s1-btn($padding-large-icon-btn, $P40, $large-height, $min-width-icon-btn);
  @include s1-btn-text($large-font-size, $N0);
  @include s1-btn-active;
  @include s1-btn-full;
  @include s1-btn-hover-full($P50);
  @include s1-btn-disabled-full($N0, $N30);
  @include s1-icon-of-btn($large-icon-size, $icon-top, $left: $icon-left);
  @include s1-icon-btn-only($large-icon-only-width);
}

/**LARGE PRIMARY OUTLINE ICON BUTTON*/
.s1-icon-btn-large-primary-outline {
  @include s1-btn($padding-large-icon-btn, $N0, $large-height, $min-width-icon-btn);
  @include s1-btn-text($large-font-size, $P40);
  @include s1-btn-active;
  @include s1-btn-outline;
  @include s1-btn-hover-outline($P50);
  @include s1-btn-disabled-outline($N40);
  @include s1-icon-of-btn($large-icon-size, $icon-top, $left: $icon-left);
  @include s1-icon-btn-only($large-icon-only-width);
}

/**LARGE PRIMARY ICON BUTTON*/
.s1-icon-btn-large-primary {
  @include s1-btn($padding-large-icon-btn, transparent, $large-height, $min-width-icon-btn, false);
  @include s1-btn-text($large-font-size, $P40);
  @include s1-btn-link($large-height);
  @include s1-btn-hover-link($P50);
  @include s1-btn-disabled-link($N40, false);
  @include s1-icon-of-btn($large-icon-size, $icon-top);
}

/**LARGE SECONDARY FULL ICON BUTTON*/
.s1-icon-btn-large-secondary-full {
  @include s1-btn($padding-large-icon-btn, $S50, $large-height, $min-width-icon-btn);
  @include s1-btn-text($large-font-size, $N0);
  @include s1-btn-active;
  @include s1-btn-full;
  @include s1-btn-hover-full($P50);
  @include s1-btn-disabled-full($N0, $N30);
  @include s1-icon-of-btn($large-icon-size, $icon-top, $left: $icon-left);
  @include s1-icon-btn-only($large-icon-only-width);
}

/**LARGE SECONDARY OUTLINE ICON BUTTON*/
.s1-icon-btn-large-secondary-outline {
  @include s1-btn($padding-large-icon-btn, $N0, $large-height, $min-width-icon-btn);
  @include s1-btn-text($large-font-size, $S50);
  @include s1-btn-active;
  @include s1-btn-outline;
  @include s1-btn-hover-outline($P50);
  @include s1-btn-disabled-outline($N40);
  @include s1-icon-of-btn($large-icon-size, $icon-top, $left: $icon-left);
  @include s1-icon-btn-only($large-icon-only-width);
}

/**LARGE SECONDARY ICON BUTTON*/
.s1-icon-btn-large-secondary {
  @include s1-btn($padding-large-icon-btn, transparent, $large-height, $min-width-icon-btn, false);
  @include s1-btn-text($large-font-size, $S50);
  @include s1-btn-link($large-height);
  @include s1-btn-hover-link($P50);
  @include s1-btn-disabled-link($N40, false);
  @include s1-icon-of-btn($large-icon-size, $icon-top, $S50);
}

/**SMALL PRIMARY FULL ICON BUTTON*/
.s1-icon-btn-small-primary-full {
  @include s1-btn($padding-small-icon-btn, $P40, $small-height, $min-width-icon-btn);
  @include s1-btn-text($small-font-size, $N0);
  @include s1-btn-active;
  @include s1-btn-full;
  @include s1-btn-hover-full($P50);
  @include s1-btn-disabled-full($N0, $N30);
  @include s1-icon-of-btn($small-icon-size, $icon-top, $left: $icon-left);
  @include s1-icon-btn-only($small-icon-only-width);
}

/**SMALL PRIMARY OUTLINE ICON BUTTON*/
.s1-icon-btn-small-primary-outline {
  @include s1-btn($padding-small-icon-btn, $N0, $small-height, $min-width-icon-btn);
  @include s1-btn-text($small-font-size, $P40);
  @include s1-btn-active;
  @include s1-btn-outline;
  @include s1-btn-hover-outline($P50);
  @include s1-btn-disabled-outline($N40);
  @include s1-icon-of-btn($small-icon-size, $icon-top, $left: $icon-left);
  @include s1-icon-btn-only($small-icon-only-width);
}

/**SMALL PRIMARY ICON BUTTON*/
.s1-icon-btn-small-primary {
  @include s1-btn($padding-small-icon-btn, transparent, $small-height, $min-width-icon-btn, false);
  @include s1-btn-text($small-font-size, $P40);
  @include s1-btn-link($small-height);
  @include s1-btn-hover-link($P50);
  @include s1-btn-disabled-link($N40, false);
  @include s1-icon-of-btn($small-icon-size, $icon-top);
}

/**SMALL SECONDARY FULL ICON BUTTON*/
.s1-icon-btn-small-secondary-full {
  @include s1-btn($padding-small-icon-btn, $S50, $small-height, $min-width-icon-btn);
  @include s1-btn-text($small-font-size, $N0);
  @include s1-btn-active;
  @include s1-btn-full;
  @include s1-btn-hover-full($P50);
  @include s1-btn-disabled-full($N0, $N30);
  @include s1-icon-of-btn($small-icon-size, $icon-top, $left: $icon-left);
  @include s1-icon-btn-only($small-icon-only-width);
}

/**SMALL SECONDARY OUTLINE ICON BUTTON*/
.s1-icon-btn-small-secondary-outline {
  @include s1-btn($padding-small-icon-btn, $N0, $small-height, $min-width-icon-btn);
  @include s1-btn-text($small-font-size, $S50);
  @include s1-btn-active;
  @include s1-btn-outline;
  @include s1-btn-hover-outline($P50);
  @include s1-btn-disabled-outline($N40);
  @include s1-icon-of-btn($small-icon-size, $icon-top, $left: $icon-left);
  @include s1-icon-btn-only($small-icon-only-width);
}

/**SMALL SECONDARY ICON BUTTON*/
.s1-icon-btn-small-secondary-icon {
  @include s1-btn($padding-small-icon-btn, transparent, $small-height, $min-width-icon-btn, false);
  @include s1-btn-text($small-font-size, $S50);
  @include s1-btn-link($small-height);
  @include s1-btn-hover-link($P50);
  @include s1-btn-disabled-link($N40, false);
  @include s1-icon-of-btn($small-icon-size, $icon-top, $S50);
}

/**-------------------TABLE-------------------*/
/** TABLE LINK BUTTON **/
.s1-table-link-btn {
  @extend %s1-body;
  @include s1-link-underline;
  @include s1-btn-disabled-link($N40, true);
  cursor: pointer;
  color: $N90;
}