@import "./variables";

.#{$component-prefix}sheet {
  display: flex;
  flex-direction: column;
  max-height: var(--sheet-max-height, $sheet-max-height);
  overflow: hidden;
  color: var(--sheet-item-text-color, $sheet-item-text-color);

  &__header {
    flex-shrink: 0;
    padding: var(--sheet-header-padding, $sheet-header-padding);
    font-size: var(--sheet-header-font-size, $sheet-header-font-size);
    font-weight: var(--font-weight-bold, $font-weight-bold);
    line-height: var(--sheet-header-height, $sheet-header-height);
    text-align: center;
  }

  &__title {
    margin-top: var(--padding-xs, $padding-xs);
    font-size: var(--sheet-title-font-size, $sheet-title-font-size);
    font-weight: normal;
    line-height: var(--sheet-title-line-height, $sheet-title-line-height);
    color: var(--sheet-title-color, $sheet-title-color);
  }

  &__description {
    position: relative;
    flex-shrink: 0;
    margin-top: var(--padding-xs, $padding-xs);
    font-size: var(--sheet-description-font-size, $sheet-description-font-size);
    line-height: var(--sheet-description-line-height, $sheet-description-line-height);
    color: var(--sheet-description-color, $sheet-description-color);
    text-align: center;
  }

  &__content {
    flex: 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  &__item,
  &__button {
    position: relative;
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 14px * $hd var(--padding-md, $padding-md);
    font-size: var(--sheet-item-font-size, $sheet-item-font-size);
    line-height: var(--sheet-item-line-height, $sheet-item-line-height);
    text-align: center;
    cursor: pointer;
    background-color: var(--sheet-item-background, $sheet-item-background);
    border: 0 none;

    &:active {
      background-color: var(--active-color, $active-color);
    }

    &--loading,
    &--disabled {
      color: var(--sheet-item-disabled-text-color, $sheet-item-disabled-text-color);

      &:active {
        background-color: var(--sheet-item-background, $sheet-item-background);
      }
    }

    &--loading {
      cursor: default;

      .#{$component-prefix}loading__spinner,
      .#{$component-prefix}loading__circular {
        width: var(--sheet-loading-icon-size, $sheet-loading-icon-size);
        height: var(--sheet-loading-icon-size, $sheet-loading-icon-size);
      }
    }

    &--disabled {
      cursor: not-allowed;
    }
  }

  &__button--cancel {
    box-sizing: border-box;
    flex-shrink: 0;
    color: var(--sheet-cancel-text-color, $sheet-cancel-text-color);
  }

  &__gap {
    display: block;
    height: var(--sheet-cancel-padding-top, $sheet-cancel-padding-top);
    background-color: var(--sheet-cancel-padding-color, $sheet-cancel-padding-color);
  }
}