@use 'sass:map';
@use '../base/typography' as typo;
@use '../base/colors';

@mixin mx-segmented-button-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $color-theme: colors.$mx-light;

  @if $is-dark {
    $color-theme: colors.$mx-dark;
  }

  // light theme
  .mat-button-toggle-group {
    &.mat-button-toggle-group-appearance-standard {
      border-color: map.get($color-theme, outline);
    }

    .mat-button-toggle {
      &.mat-button-toggle-appearance-standard {
        background-color: transparent;
        & + .mat-button-toggle {
          border-left-color: map.get($color-theme, outline);
        }
      }

      &:hover {
        background-color: rgba(map.get($color-theme, onSurface), 0.08);
      }

      .mat-button-toggle-ripple::before {
        background-color: rgba(map.get($color-theme, onSurface), 0.12);
      }

      &.mat-button-toggle-checked {
        background-color: map.get($color-theme, secondaryContainer);

        &:hover {
          .mat-button-toggle-ripple {
            background-color: rgba(map.get($color-theme, onSecondaryContainer), 0.08);
          }
        }

        .mat-button-toggle-ripple::before {
          background-color: rgba(map.get($color-theme, onSecondaryContainer), 0.12);
        }
        .mat-button-toggle-label-content::before {
          background-color: map.get($color-theme, onSecondaryContainer);
        }
      }
    }
  }
}

.mat-button-toggle-group {
  .mat-button-toggle {
    @extend .gl-label-lg;

    .mat-button-toggle-label-content {
      line-height: 40px;
    }

    .mat-button-toggle-button {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  &.mx-density--1 {
    .mat-button-toggle-label-content {
      line-height: 36px;
    }
  }
  &.mx-density--2 {
    .mat-button-toggle-label-content {
      line-height: 32px;
    }
  }
  &.mx-density--3 {
    .mat-button-toggle-label-content {
      line-height: 28px;
    }
  }

  mat-icon {
    height: 18px;
    width: 18px;
  }
  mat-icon svg {
    height: 18px;
    width: 18px;
  }
}

.mx-width-fixed {
  &.mat-button-toggle-group {
    .mat-button-toggle {
      flex: 1 1 0;
      min-width: 0;
    }

    .mat-button-toggle-label-content {
      padding: 0 8px;
    }

    .mat-button-toggle-button {
      padding: 0 !important;
    }

    .mat-button-toggle-checkbox-wrapper {
      position: unset;
      transform: unset;
    }
  }
}