@use '../../../styles/tools' as *;
@use '../../settings/variables' as theme-variables;
@import 'variables';

ion-segment ion-segment-button {
  --border-color: var(--ion-segment-border-color);
  --border-radius: theme-variables.$border-radius-inset;
  --color: #{$segment-button-color};
  --color-checked: #{$segment-button-checked-color};
  --indicator-height: 36px;
  --transition: all 0.2s ease;
}

// @media (prefers-color-scheme: dark) {
//   .md body ion-segment ion-segment-button,
//   .ios body ion-segment ion-segment-button,
//   bodyion-segment ion-segment-button {
//     --color-checked: var(--sd-sys-color-primary);
//     --outline-color: var(--sd-sys-color-primary-border);
//   }
// }

ion-segment ion-segment-button {
  margin: 4px !important;
  min-height: 36px !important;
  text-transform: unset;


  &::part(indicator-background) {
    @include shadow(sm);
    background-color: #{$segment-button-checked-background-color} !important;
    border-radius: theme-variables.$border-radius-inset;
  }
  
  ion-label {
    @include typography(text-sm, semi-bold);
  }
}

// @media (prefers-color-scheme: dark) {
//   .md body ion-segment ion-segment-button,
//   .ios body ion-segment ion-segment-button,
//   bodyion-segment ion-segment-button {
//     &::part(indicator-background) {
//       background-color: var(--sd-sys-color-primary-subtle) !important;
//       outline-style: solid;
//       outline-width: 1px;
//       outline-color: var(--outline-color);
//     }
//   }
// }