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

$ink-modal-header-text-color: $ink-color-text !default;
$ink-modal-content-text-color: $ink-color-text !default;

.ink-modal {
  &__header {
    @include hairline-bottom-relative($color: $ink-color-grey-5);
    @include line(1);

    padding: $ink-spacing-sm $ink-spacing-sm;
    color: $ink-modal-header-text-color;
    font-size: $ink-font-size-lg;
    text-align: center;
  }

  &__content {
    padding: $ink-spacing-md $ink-spacing-sm;
    min-height: 180px;
    max-height: 840px;
    color: $ink-modal-content-text-color;
    font-size: $ink-font-size-md;
    box-sizing: content-box;
    width: auto;
  }

  &__footer {
    padding: $ink-spacing-sm;

    &.ink-modal__footer--null {
      @include hairline-top-relative($color: $ink-color-grey-5);
      padding: 0;
    }

    .ink-modal__action {
      @include display-flex;

      &__button {
        @include flex(auto);
        @include line(1);
        // @include active;

        font-size: $ink-font-size-md;
        outline: 0;
        border: none;
        border-radius: 0;
        background-color: transparent;

        &::after {
          border: none;
          border-radius: 0;
          width: initial;
          height: initial;
        }

        &:not(:first-child) {
          @include hairline-left-relative($color: $ink-color-grey-5);
        }
      }
    }
  }
}