@import "../../themes/mixins";

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

:host {
  /**
   * @prop --background: Background of the item option
   * @prop --color: Color of the item option
   */
  background: var(--background);
  color: var(--color);
}

.button-native {
  @include text-inherit();

  display: inline-block;

  position: relative;

  width: 100%;
  height: 100%;

  border: 0;

  outline: none;

  background: transparent;

  cursor: pointer;
  appearance: none;

  box-sizing: border-box;
}

.button-inner {
  display: flex;

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

  width: 100%;
  height: 100%;
}

.horizontal-wrapper {
  display: flex;

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

  width: 100%;
}

::slotted(*) {
  flex-shrink: 0;
}

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

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

  transition-duration: 0;
  transition-property: none;
}

// Item Option: Disabled
// --------------------------------------------------

:host(.item-option-disabled) {
  pointer-events: none;
}

:host(.item-option-disabled) .button-native {
  cursor: default;
  pointer-events: none;
}