@import './variable.scss';
@import '../../../styles/mixins.scss';

$class-prefix: 'cn-ui-m-action-sheet';

.#{$hashClassName}.#{$class-prefix}-drawer {
  --drawer-content-corner: #{$m-s-16};
  background-color: transparent;
}

.#{$hashClassName}.#{$class-prefix} {
  margin-left: var(--cn-action-sheet-padding-lr);
  margin-right: var(--cn-action-sheet-padding-lr);
  background-color: transparent;
  border-top-left-radius: var(--cn-action-sheet-corner);
  border-top-right-radius: var(--cn-action-sheet-corner);
  overflow: hidden;

  .#{$class-prefix} {
    &-msg {
      padding: var(--cn-action-sheet-msg-padding) 0;
      color: var(--cn-action-sheet-msg-font-color);
      font-size: var(--cn-action-sheet-msg-font-size);
      background-color: var(--cn-action-sheet-option-bg-color);
      text-align: center;
      line-height: 1.5;
      box-sizing: border-box;
      word-wrap: break-word;
      white-space: break-spaces;
    }
    &-menu-msg {
      text-align: left;
      color: var(--cn-action-sheet-msg-menu-font-color);
      font-weight: var(--cn-action-sheet-msg-menu-font-weight);
      font-size: var(--cn-action-sheet-msg-menu-font-size);
    }
    &-option-warper {
      padding: 0 var(--cn-action-sheet-padding-lr);
      background-color: var(--cn-action-sheet-option-bg-color);
    }

    &-option-list {
      @include flex(column, flex-start, stretch);
      border-top: $m-line solid var(--cn-action-sheet-option-border-color);
      border-bottom-left-radius: var(--cn-action-sheet-corner);
      border-bottom-right-radius: var(--cn-action-sheet-corner);
      max-height: 70vh;
      overflow-x: hidden;
      overflow-y: auto;
      background-color: var(--cn-action-sheet-bg-color);
      -webkit-overflow-scrolling: touch;
      @include limitedOverScroll();
    }

    &-option {
      position: relative;
      border-bottom: $m-line solid var(--cn-action-sheet-option-border-color);
      background-color: var(--cn-action-sheet-option-bg-color);
      color: var(--cn-action-sheet-option-font-color);
      box-sizing: border-box;

      &-content {
        @include flex(row, center);
        flex: 1;
      }

      &--advanced {
        display: flex;
        flex-direction: row;
        justify-items: flex-start;
        align-items: center;
        padding-left: $m-s-48;
        padding-right: 0;
        border-bottom: none;
        box-sizing: border-box;
      }

      &--advanced &-content {
        justify-content: flex-start;
        border-bottom: $m-line solid var(--cn-action-sheet-option-border-color);
      }

      &:active {
        color: var(--cn-action-sheet-option-font-color-hover);
        @include disableTapHighlight();
      }

      &--destructive {
        color: $m-color-error;

        &:active {
          color: $m-color-error-dark;
        }
      }

      &--disabled {
        color: var(--cn-action-sheet-option-font-color-disabled);

        &:active {
          color: var(--cn-action-sheet-option-font-color-disabled);
        }
      }

      &--advanced &--left,
      &--left {
        text-align: left;
        justify-content: flex-start;
      }

      &--advanced &--center,
      &--center {
        text-align: center;
        justify-content: center;
      }

      &--advanced &--right,
      &--right {
        text-align: right;
        justify-content: flex-end;
      }
    }

    &-option--no-line {
      border-bottom: none;
    }

    &-option--disabled &-icon {
      opacity: 0.2;
    }
    &-option-text-menu {
      color: #005be5;
    }
    &-option-label {
      margin-bottom: $m-s-8;
      text-align: left;
      color: var(--cn-action-sheet-msg-font-color);
      font-weight: var(--cn-action-sheet-msg-menu-font-weight);
    }
    &-cancel {
      margin-top: var(--cn-action-sheet-gap-height);
      border: none;
      border-radius: var(--cn-action-sheet-corner);
      background-color: var(--cn-action-sheet-option-bg-color);
      overflow: hidden;
      display: flex;
      justify-content: center;
    }

    &-option--last &-option-content,
    &-option--last {
      border-bottom: none;
    }

    &-option-text {
      margin-top: var(--cn-action-sheet-padding-tb);
      margin-bottom: var(--cn-action-sheet-padding-tb);
      min-height: $m-s-21;
      font-size: var(--cn-action-sheet-option-font-size);
      text-transform: capitalize;
      display: flex;
      align-items: center;
    }

    &-badge {
      margin-left: $m-s-4;
    }

    &-icon {
      position: absolute;
      left: 0;
      top: 0;
      width: $m-s-48;
      height: $m-s-48;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &-safe-area {
      &--fullwidth {
        background-color: var(--cn-action-sheet-option-bg-color);
      }
    }
  }

  &--fullwidth {
    margin: 0;
    background-color: var(--cn-action-sheet-bg-color);
  }

  &--fullwidth .#{$class-prefix}-option-list,
  &--fullwidth .#{$class-prefix}-cancel {
    border-radius: 0;
  }
}