@import "./item-option.vars";

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

:host {
  --ion-color-base: #{ion-color(primary, base)};
  --ion-color-contrast: #{ion-color(primary, contrast)};

  color: #{current-color(contrast)};

  font-family: $font-family-base;
}

.item-option-native {
  @include text-inherit();
  @include padding(0, .7em);

  width: 100%;
  height: 100%;

  border: 0;

  outline: none;

  background: #{current-color(base)};

  cursor: pointer;
  appearance: none;
}

.item-option-native:hover {
  opacity: 0.8;
}

.item-option-button-inner {
  display: flex;

  flex-direction: column;
  flex-flow: row nowrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;

  letter-spacing: inherit;

}

::slotted([slot="icon-only"]) {
  @include padding(0);
  @include margin(0, 10px);

  min-width: .9em;

  font-size: 1.8em;
}


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

:host(.item-option-expandable) {
  flex-shrink: 0;

  transition-duration: 0;
  transition-property: none;
  transition-timing-function: cubic-bezier(.65, .05, .36, 1);
}
