@import "../../assets/scss/main";

$dialogPadding: 32px;
$dialogBorderRadius: 4px;

.dialog {
  &__container {
    padding: 16px 32px 24px 32px;
    background-color: $white;
    border-radius: $dialogBorderRadius;
    border: 1px solid $borderColor;
    box-shadow: $elevation;

    &.simple {
      .dialog {
        &__header {
          margin-bottom: 0;
          padding-bottom: 0;
          border-bottom: 0;
        }

        &__body {
          margin-top: 12px;
        }
      }
    }
  }

  &__header {
    @include titleFour;
    font-weight: bold;
    text-align: left;
    padding-bottom: 16px;
    border-bottom: 1px solid $gray30;
    word-break: break-word;
  }

  &__description {
    margin-top: 16px;
    @include headline;
    color: $gray500;
    word-break: break-word;
  }

  &__body {
    margin-top: 24px;
    word-break: break-word;
  }

  &__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 24px;

    &::v-deep {
      .buttonComponent__wrapper {
        &:not(:last-child) {
          margin-right: 12px;
        }
      }
    }
  }

  &__cross {
    position: absolute;
    top: 16px;
    right: 12px;
    cursor: pointer;
  }

}