@import './mixins/mixins.scss';
@import './themes/vars.scss';

@include themes-mixin {
  @include b(confirm) {
    @include once {
      width: 80vw;
      max-width: 446px;
      margin: auto;
      border-radius: 9px;
      padding: 28px;
      padding-bottom: 20px;
      padding-top: 16px;
      @include e(content) {
        font-size: 16px;
        padding-right: 9px;
        margin-top: 10px;
        margin-bottom: 19px;
        position: relative;
      }
      @include e(footer) {
        display: flex;
        justify-content: flex-end;
      }
    }
    @include b(confirm-title) {
      @include once {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        @include b(confirm-title-icon) {
          vertical-align: middle;
          margin-right: 8px;
        }
        @include b(confirm-title-content) {
          display: flex;
          align-items: center;
        }
      }
      @include b(confirm-title-icon) {
        @include m(confirm-type) {
          color: $warning-6;
        }
        @include m(success-type) {
          color: $success-6;
        }
        @include m(error-type) {
          color: $error-6;
        }
      }
      color: $--confirm-title-color;
    }
    background: $--confirm-background-color;
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.16);
    color: $--confirm-color;
  }
}