@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$confirm: () !default;
$confirm: map.merge(
  (
    title-font-size: value('font-size-primary'),
    title-weight: 500,
    title-color: value('content-color-primary'),
    icon-color: value('color-warning-base'),
    close-color: value('content-color-placeholder'),
    close-color-hover: value('content-color-base'),
    header-padding: 8px,
    body-padding: 14px 8px,
    body-padding-with-title: 8px,
    actions-padding: 14px 8px 8px,
    header-v-padding: 10px,
    header-h-padding: 14px,
    body-v-padding: 10px,
    body-h-padding: 14px,
    footer-v-padding: 12px,
    footer-h-padding: 14px
  ),
  $confirm
);

.#{$namespace}-confirm {
  &-vars {
    @include define-preset-values('confirm', $confirm);
  }

  @include basis;

  .#{$namespace}-modal__content {
    position: relative;
    padding: 0;
  }

  &__header {
    position: relative;
    display: flex;
    align-items: center;
    padding: value('confirm-header-v-padding') value('confirm-header-h-padding');
  }

  &__title {
    flex: 1 0 0;
    font-size: value('modal-title-font-size');
    font-weight: value('modal-title-weight');
    color: value('modal-title-color');
  }

  &__body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: value('confirm-body-v-padding') value('confirm-body-h-padding');

    // &--with-title {
    //   padding: value('confirm-body-padding-with-title');
    // }

    &--no-title {
      padding-top: calc(
        #{value('confirm-header-v-padding')} * 0.5 + #{value('confirm-body-v-padding')}
      );
    }

    &--left {
      justify-content: flex-start;
    }

    &--right {
      justify-content: flex-end;
    }
  }

  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: 4px;
    color: value('confirm-icon-color');
  }

  &__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: value('confirm-footer-v-padding') value('confirm-footer-h-padding');

    &--left {
      justify-content: flex-start;
    }

    &--right {
      justify-content: flex-end;
    }
  }

  &__button {
    padding: 0 28px;

    &:last-child {
      margin-inline-start: 14px;
    }
  }

  &__close {
    position: relative;
    display: flex;
    align-items: center;
    height: 24px;
    padding: 0;
    margin-inline-start: 6px;
    color: value('confirm-close-color');
    cursor: pointer;
    background-color: transparent;
    border: 0;
    outline: 0;
    transition: value('transition-color');

    &:hover,
    &:focus {
      color: value('confirm-close-color-hover');
    }
  }
}