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

@include themes-mixin {
  @include b(confirm) {
    @include once {
      transition: background-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier;
      box-sizing: border-box;
      width: 100%;
      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 {
        transition: color .3s $--n-ease-in-out-cubic-bezier;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 18px;
        font-weight: 500;
        @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) {
          path {
            fill: $--warning-6;
          }
        }
        @include m(success-type) {
          path {
            fill: $--success-6;
          }
        }
        @include m(error-type) {
          path {
            fill: $--error-6;
          }
        }
      }
      @include e(close-mark) {
        path {
          fill: $--confirm-close-fill;
        }
      }
      color: $--confirm-title-color;
    }
    background: $--confirm-background-color;
    color: $--confirm-color;
  }
}