@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./item-option.common";

// Ionic Item Option
// --------------------------------------------------

:host {
  @include globals.padding(0);
  @include globals.typography(globals.$ion-body-action-sm);
}

.button-native {
  @include globals.padding(globals.$ion-space-200);

  min-width: globals.$ion-scale-1600;
  height: globals.$ion-scale-1600;
}

::slotted([slot="top"]) {
  @include globals.margin(0, 0, globals.$ion-space-100, 0);
}

::slotted([slot="bottom"]) {
  @include globals.margin(globals.$ion-space-100, 0, 0, 0);
}

::slotted([slot="start"]) {
  @include globals.margin(0, globals.$ion-space-100, 0, 0);
}

::slotted([slot="end"]) {
  @include globals.margin(0, 0, 0, globals.$ion-space-100);
}

::slotted(ion-icon),
::slotted([slot="icon-only"]) {
  @include globals.margin(0);

  width: globals.$ion-scale-500;

  min-width: initial;
  height: globals.$ion-scale-500;
}

// Item Option Shapes
// --------------------------------------------------

/* Round */
:host(.item-option-round) {
  @include globals.border-radius(globals.$ion-border-radius-300);
}

/* Soft */
:host(.item-option-soft) {
  @include globals.border-radius(globals.$ion-border-radius-200);
}

/* Rectangular */
:host(.item-option-rectangular) {
  @include globals.border-radius(globals.$ion-border-radius-0);
}

// Item Option States
// --------------------------------------------------

/* Disabled */
:host(.item-option-disabled)::after {
  @include globals.disabled-state();
}

:host(.item-option-disabled) .button-native {
  opacity: 1;
}

// Subtle Item Option
// --------------------------------------------------

:host(.item-option-subtle) {
  --background: #{globals.ion-color(primary, base, $subtle: true)};
  --background-activated: #{globals.ion-color(primary, shade, $subtle: true)};
  --color: #{globals.ion-color(primary, contrast, $subtle: true)};
}

:host(.item-option-subtle.ion-color) {
  background: globals.current-color(base, $subtle: true);
  color: globals.current-color(contrast, $subtle: true);
}

// Bold Item Option
// --------------------------------------------------

:host(.item-option-bold) {
  --background: #{globals.ion-color(primary, base)};
  --background-activated: #{globals.ion-color(primary, shade)};
  --color: #{globals.ion-color(primary, contrast)};
}

:host(.item-option-bold.ion-color) {
  background: globals.current-color(base);
  color: globals.current-color(contrast);
}

// Item Expandable Animation
// --------------------------------------------------

:host(.item-option-expandable) {
  transition-timing-function: globals.$ion-transition-curve-expressive;
}