$P40: var(--s1-P-40-color);
$N0: var(--s1-N-0-color);
$N40: var(--s1-N-40-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);

$large-btn-group-height: 42px;
$small-btn-group-height: 34px;
$large-btn-height: 32px;
$small-btn-height: 24px;
$large-font-size: 13px;
$small-font-size: 11px;
$large-padding: 0 16px;
$small-padding: 0 12px;
$border-radius: 3px;

@mixin s1-segmented-btn($btn-group-height, $btn-height, $size, $bg-color-checked, $color, $padding) {
  &.mat-button-toggle-group {
    color: $color;
    background-color: var(--s1-N-0-color);
    border: 1px solid $color;
    border-radius: 3px;
    padding: 4px;
    height: $btn-group-height;
    box-sizing: border-box;

    /**DISABLED*/
    &[aria-disabled='true'] {
      color: $N40;
      border: 1px solid $N40;
    }

    /**HOVER*/
    .mat-button-toggle-focus-overlay {
      background-color: $N0;
    }

    .mat-button-toggle-appearance-standard {
      border-radius: 0;
      background-color: $N0;
      color: $color;

      .mat-button-toggle-label-content {
        line-height: $btn-height;
        font-size: $size;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        letter-spacing: 0.5px;
        padding: $padding;
      }

      /**DISABLED*/
      &.mat-button-toggle-disabled {
        color: $N40;
      }
    }

    &.mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {
      border-left: 0;
    }

    /**CHECKED BTN*/
    .mat-button-toggle-checked {
      background-color: $bg-color-checked;
      color: $N0;
      border-radius: 3px;

      &.mat-button-toggle-disabled {
        background-color: $N40;
        color: $N0;
      }
    }
  }
}

@mixin s1-segmented-btn-primary($btn-group-height, $btn-height, $size, $padding) {
  @include s1-segmented-btn($btn-group-height, $btn-height, $size, $P40, $P40, $padding);
}

@mixin s1-segmented-btn-secondary($btn-group-height, $btn-height, $size, $padding) {
  @include s1-segmented-btn($btn-group-height, $btn-height, $size, $S50, $S50, $padding);
}

.s1-segmented-btn-large-primary {
  @include s1-segmented-btn-primary($large-btn-group-height, $large-btn-height, $large-font-size, $large-padding);
}

.s1-segmented-btn-small-primary {
  @include s1-segmented-btn-primary($small-btn-group-height, $small-btn-height, $small-font-size, $small-padding);
}

.s1-segmented-btn-large-secondary {
  @include s1-segmented-btn-secondary($large-btn-group-height, $large-btn-height, $large-font-size, $large-padding);
}

.s1-segmented-btn-small-secondary {
  @include s1-segmented-btn-secondary($small-btn-group-height, $small-btn-height, $small-font-size, $small-padding);
}