// Generated with util/create-component.js
@import '../../variables.scss';
@import '../../typography.scss';

:root {
  --modal-content-padding: var(--space-l) var(--space-xl);
  --modal-overlay-background: rgba(83, 83, 83, 0.137);
  --modal-content-background-color: var(--color-white);
  --modal-border-radius: var(--global-border-radius);
}

.rrui-modal {
  &__overlay {
    background: var(--modal-overlay-background);
    display: none;
    position: fixed;
    overflow-y: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    justify-content: center;
    align-items: center;

    &--active {
      display: flex;
    }
  }

  &__content {
    background-color: var(--modal-content-background-color);
    border-radius: var(--modal-border-radius);
    padding: var(--modal-content-padding);
    max-width: 640px;
    box-shadow: var(--global-shadow);
  }

  &__actions {
    display: flex;
    justify-content: flex-end;

    .rrui-button {
      margin-right: var(--space-m);
    }
  }
}
