@import '../../scss/variables.scss';
@import '../../scss/mixins.scss';

// #variables
$s-dialog-width: 320px !default;
$s-dialog-small-scrren-width: 93.75vw !default;
$s-dialog-bg: $s-white !default;
$s-dialog-border-radius: $s-border-radius-xl !default;

$s-dialog-header-padding-y: 16px !default;
$s-dialog-header-padding-x: 16px !default;
$s-dialog-header-border-color: $s-border-color !default;
$s-dialog-header-line-height: $s-line-height !default;

$s-dialog-title-font-size: $s-font-size-lg !default;
$s-dialog-headed-title-font-size: $s-font-size !default;

$s-dialog-close-padding: 16px !default;
$s-dialog-close-font-size: $s-font-size-lg !default;

$s-dialog-body-padding-y: 24px !default;
$s-dialog-body-padding-x: 16px !default;

$s-dialog-message-margin-top: 10px !default;
$s-dialog-message-font-size: $s-font-size !default;
$s-dialog-message-color: $s-gray-700 !default;

$s-dialog-footer-border-color: $s-border-color !default;

$s-dialog-rounded-button-footer-padding-x: 16px !default;
$s-dialog-rounded-button-footer-padding-y: 16px !default;
$s-dialog-rounded-button-button-gap: 16px !default;

// #endvariables

.s-dialog {
  display: flex;
  flex-direction: column;
  width: $s-dialog-width;
  background-color: $s-dialog-bg;
  border-radius: $s-dialog-border-radius;

  @media (max-width: 320px) {
    width: $s-dialog-small-scrren-width;
  }

  @at-root {
    .s-dialog-header {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: $s-dialog-header-padding-y;
      padding-left: $s-dialog-header-padding-x;
      padding-right: $s-dialog-header-padding-x;
      line-height: $s-dialog-header-line-height;

      .s-dialog:not(.s-dialog-untitled) & {
        padding-bottom: $s-dialog-header-padding-y;
        @include border-bottom($s-dialog-header-border-color);
      }

      @at-root {
        .s-dialog-title {
          font-size: $s-dialog-title-font-size;
          text-align: center;
        }

        .s-dialog-close {
          height: auto;
          margin-top: -$s-dialog-header-padding-y;
          margin-right: -$s-dialog-header-padding-x;
          margin-bottom: -$s-dialog-header-padding-y;
          padding: $s-dialog-close-padding;
          border: none;
          font-size: $s-dialog-close-font-size;
          line-height: inherit;
          cursor: pointer;
        }
      }
    }

    .s-dialog-body {
      padding: $s-dialog-body-padding-y $s-dialog-body-padding-x;

      @at-root {
        .s-dialog-message {
          font-size: $s-dialog-message-font-size;
          text-align: center;
          color: $s-dialog-message-color;

          .s-dialog-title ~ & {
            margin-top: $s-dialog-message-margin-top;
          }
        }
      }
    }

    .s-dialog-footer {
      position: relative;
      display: flex;
      flex-direction: row;

      .s-dialog:not(.s-dialog-rounded-button) & {
        @include border-top($s-dialog-footer-border-color);
      }

      @at-root {
        .s-dialog-button {
          flex: 1 1 0;

          .s-dialog:not(.s-dialog-rounded-button) & {
            border-radius: 0;

            &:first-child {
              border-bottom-left-radius: $s-dialog-border-radius;
            }
            &:last-child {
              border-bottom-right-radius: $s-dialog-border-radius;
            }
            &:not(:first-child) {
              border-left: none;
              @include border-left($s-dialog-footer-border-color) {
                left: -0.5px;
                height: auto;
              }
            }
          }
        }
      }
    }
  }
}

.s-dialog-rounded-button {
  .s-dialog-footer {
    padding-left: $s-dialog-rounded-button-footer-padding-x;
    padding-right: $s-dialog-rounded-button-footer-padding-x;
    padding-bottom: $s-dialog-rounded-button-footer-padding-y;
  }

  .s-dialog-button:not(:first-child) {
    margin-left: $s-dialog-rounded-button-button-gap;
  }
}

.s-dialog-headed {
  .s-dialog-title {
    font-size: $s-dialog-headed-title-font-size;
  }

  &.s-dialog-untitled {
    .s-dialog-body {
      padding-top: 0;
    }
  }
}