@import "../../base.less";

@import "./_var.less";

@import "../../mixins/_index.less";

.@{prefix}-action-sheet {
  &__panel {
    background-color: #fff;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  &__menu-wrapper {
    background-color: #fff;
  }

  &__menu-slider {
    display: flex;
  }

  &__menu-page {
    display: flex;
    flex-wrap: wrap;
  }

  &__panel-grid &__menu {
    padding-top: @action-sheet-grid-padding-top;
    width: 100%;
    flex-shrink: 0;
  }

  &__panel-grid &__cell {
    display: flex;
    flex-direction: column;
    width: @action-sheet-grid-cell-width;
    margin-bottom: @action-sheet-grid-row-space;
    padding: 0;

    &:nth-child(4n) {
      margin-right: 0;
    }
  }

  &__panel-grid &__cell-text {
    margin-top: 8px;
    font-size: 14px;
    padding: 0;
    color: @action-sheet-grid-text-color;
  }

  &__panel-list &__cell::after {
    content: " ";
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #dedede;
    transform-origin: 0 100%;
    transform: scaleY(.5);
  }

  &__cell {
    position: relative;
    text-align: center;
    width: 100%;
    font-size: @action-sheet-cell-font-size;
    padding: @action-sheet-cell-padding-y 0;

    &:not(:disabled):active {
      background-color: @action-sheet-cell-active-bg-color;
    }

    &:disabled {
      color: @action-sheet-cell-disabled-color;
    }

    &-icon {
      width: @action-sheet-grid-icon-size;
      height: @action-sheet-grid-icon-size;
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
    }

    &-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 20px;
    }
  }

  &__separation {
    height: @action-sheet-action-space;
    background-color: @action-sheet-action-space-bg-color;
  }

  &__action {
    width: 100%;
    background-color: #fff;
    padding: @action-sheet-action-padding-y 0;
    font-size: @action-sheet-action-font-size;
    border-top: 1px solid @gray-color-1;

    &:active {
      background-color: @action-sheet-cell-active-bg-color;
    }
  }

  &__indicator {
    display: flex;
    justify-content: center;
    padding-bottom: 12px;

    &-item {
      border-radius: 100%;
      width: @action-sheet-grid-indicator-size;
      height: @action-sheet-grid-indicator-size;
      background-color: @action-sheet-grid-indicator-color;

      &:not(:last-child) {
        margin-right: @action-sheet-grid-indicator-space;
      }
    }

    &-item.on {
      background-color: @brand-color;
    }
  }
}