@import 'shared/colors';

.sc-ion-alert-ios {
  &.alert-wrapper {
    width: 80vw;
    max-width: 500px;
    .alert-head {
      padding-bottom: 0px;
      .alert-title {
        @include text-type(d, t3, m);
        overflow: auto;
        max-height: 80vh;
      }
    }

    // 共用屬性
    .alert-sub-title,
    .alert-message {
      word-break: break-word;
      padding-bottom: 16px;
      @include text-type(d, st2, r);
    }

    .alert-sub-title {
      padding-bottom: 0;
      &:not(:empty) {
        padding-top: 8px;
        padding-bottom: 8px;
      }
    }

    // message顏色不同
    .alert-message {
      padding-bottom: 8px;
      @include text-type(2, b1, r);

      &:not(:empty) {
        padding-top: 0;
        padding-bottom: 16px;
      }
    }
  }

  .alert-button-inner {
    @include text-type(pr, st2, m);
  }

  .alert-button-role-cancel .alert-button-inner {
    @include text-type(4, st2, m);
  }
}

.uofx-alert-button-group {
  .alert-button-group {
    align-items: center;
  }

  .uofx-alert-button {
    border-radius: 10px;
    width: 85%;
    border: 0px;
    display: block;
    background-color: get-color(or-550);
    margin-bottom: 12px;

    .alert-button-inner {
      @include text-type(w, st2, m);
    }

    &.outline {
      // 使用 important 避免 ios 移除右邊框
      border: 1px solid get-color(or-550) !important;
      background-color: get-color(w-50);

      .alert-button-inner {
        @include text-type(pr, st2, m);
      }
    }

    &.text-btn {
      text-decoration-line: underline;
      text-decoration-color: get-color(bk-400);
      background-color: transparent;
      .alert-button-inner {
        @include text-type(4, st2, m);
      }
    }
  }
}