@use 'sass:math';
@use '../core/style/spacing' as *;
@use '../icon/icon' as *;

$button-toggle-margin: $uxg-spacing-2;
$button-toggle-icon-dense: 18px;

$filtering-button-toggle-radius: $uxg-spacing-1;
$filtering-button-toggle-margin: 20px;
$filtering-button-toggle-height: 64px;
$filtering-button-font-size: 12px;

$button-toggle-radius: $uxg-spacing-5;
$button-toggle-radius-v: $uxg-spacing-3;

.mat-button-toggle-group[dense] {
  .mat-button-toggle-label-content {
    padding: 0 $button-toggle-margin;

    .mat-icon {
      @include icon-size($button-toggle-icon-dense);
    }
  }

  &.mat-button-toggle-vertical {
    .mat-button-toggle-label-content {
      margin: $uxg-spacing-2 0;
    }
  }
}

.mat-button-toggle-group.mat-button-toggle-group-appearance-standard {
  overflow: hidden;
  border-radius: $button-toggle-radius;

  .mat-button-toggle {
    flex: 1;

    .mat-button-toggle-button {
      border: 1px solid;
    }

    &:last-of-type {
      .mat-button-toggle-button {
        border-top-right-radius: math.div($button-toggle-radius, 2);
        border-bottom-right-radius: math.div($button-toggle-radius, 2);
      }
    }

    &:first-of-type {
      .mat-button-toggle-button {
        border-top-left-radius: math.div($button-toggle-radius, 2);
        border-bottom-left-radius: math.div($button-toggle-radius, 2);
      }
    }
  }

  &.mat-button-toggle-vertical {
    display: inline-flex;
    border-radius: $button-toggle-radius-v;

    .mat-button-toggle {
      width: 100%;
      border-radius: 0;

      .mat-button-toggle-ripple {
        border-radius: 0;
      }
    }
  }
}

.uxg-filtering-toggle-group.mat-button-toggle-group.mat-button-toggle-group-appearance-standard {
  border: none;
  border-radius: 0;
  overflow: visible;
  padding-bottom: $button-toggle-margin + $filtering-button-font-size;

  .mat-button-toggle {
    border: 1px solid;
    border-radius: $filtering-button-toggle-radius;

    &.mat-button-toggle-checked .mat-button-toggle-button {
      border-radius: 0;
    }
  }

  .mat-button-toggle-label-content {
    line-height: $filtering-button-toggle-height !important;
    padding: 0 math.div(($filtering-button-toggle-height - $uxg-spacing-4), 2);

    span {
      position: absolute;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      bottom: -(math.div($filtering-button-toggle-height, 2) + math.div($filtering-button-font-size, 2) + $button-toggle-margin);
    }
  }

  .mat-button-toggle + .mat-button-toggle {
    margin-left: $filtering-button-toggle-margin;
  }
}