/**
 * @license
 * Copyright 2023 Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
@use '@material/theme/theme' as mdc-theme;
@use '@material/animation/functions' as mdc-animation;
@use '../../button/mixins' as button-mixins;

@mixin host() {
  display: inline-block;
}

@mixin core-styles() {
  .forge-button-toggle {
    @include base;

    &:disabled {
      @include button-mixins.outlined-disabled;
    }

    &__selected:not(:disabled) {
      @include selected;
    }

    &__selected:disabled {
      @include selected;
      opacity: 0.37;
    }

    ::slotted([slot=leading]) {
      @include icon;

      margin-right: 4px;
    }

    ::slotted([slot=trailing]) {
      @include icon;

      margin-left: 4px;
    }

    &--dense {
      @include dense;

      ::slotted([slot=leading]) {
        @include icon-dense;
      }

      ::slotted([slot=trailing]) {
        @include icon-dense;
      }
    }
  }
}

@mixin base() {
  @include button-mixins.base;
  @include button-mixins.outlined;

  width: 100%;
  box-sizing: border-box;
  transition: mdc-animation.enter(background-color, 150ms);
  border-radius: 0;
  border-bottom-width: var(--forge-button-toggle-border-bottom-width, 1px);
  border-right-width: var(--forge-button-toggle-border-right-width, 1px);
  border-top-left-radius: var(--forge-button-toggle-border-top-left-radius, 4px);
  border-bottom-left-radius: var(--forge-button-toggle-border-bottom-left-radius, 4px);
  border-top-right-radius: var(--forge-button-toggle-border-top-right-radius, 4px);
  border-bottom-right-radius: var(--forge-button-toggle-border-bottom-right-radius, 4px);
}

@mixin selected() {
  @include mdc-ripple-theme.states(on-primary, false);
  @include mdc-theme.property(background-color, primary);
  @include mdc-theme.property(color, text-primary-on-dark);
}

@mixin dense() {
  @include button-mixins.dense;

  font-size: 0.75rem;
}

@mixin icon() {
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  font-size: 1.125rem !important;
  vertical-align: top;
}

@mixin icon-dense() {
  width: 0.875rem;
  height: 0.875rem;
  font-size: 0.875rem !important;
}
