@use './theme.scss' as *;

$root: 'single-toggle';
$selected: 'Mui-selected';
$disabled: 'Mui-disabled';
$toggle-button-root: 'MuiToggleButton-root';

.#{$root} {
  @include single-toggle-theme-modifiers();

  height: 25px;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 5px 20px;
  margin: 0 !important;
  border-radius: 15px !important;

  &__text {
    color: single-toggle-theme-color('text');
  }

  &.#{$toggle-button-root} {
    &.#{$selected} {
      background: single-toggle-theme-color('selected-background');
      background-origin: border-box;
      border-color: single-toggle-theme-color('selected-border');

      &:hover {
        background: single-toggle-theme-color('selected-hover-background');
      }

      .#{$root}__text {
        color: single-toggle-theme-color('selected-text');
      }
    }

    &.#{$disabled} {
      border-color: transparent;

      &.#{$selected} {
        background: single-toggle-theme-color('selected-disabled-background');
        background-origin: border-box;
      }

      .#{$root}__text {
        color: single-toggle-theme-color('disabled-text');
      }
    }

    &:hover {
      background-color: transparent;

      .#{$root}__text {
        color: single-toggle-theme-color('hover-text');
      }
    }
  }
}