@import 'libs/styles/src/variables/shadows';
@import 'libs/styles/src/variables/gutters';

.ui-dialog {
  background: white;
  border-radius: var(--digi--ui--border--radius);
  box-shadow: $msfa__shadow;
  padding: $digi--layout--gutter--s $digi--layout--gutter--xl $digi--layout--gutter--l;
  position: relative;
  max-height: 90vh;
  display: flex;
  flex-direction: column;

  &__heading {
    flex: 1 1 2rem;
  }

  &__scrollable-content {
    overflow: auto;
    flex-grow: 1;
  }

  &__close-button {
    position: absolute;
    top: var(--digi--layout--gutter);
    right: var(--digi--layout--gutter--s);
    background: transparent;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &__close-button-text {
    font-size: var(--digi--typography--font-size--s);
  }

  &__footer {
    min-height: var(--digi--layout--gutter);
    display: flex;
    margin-top: $digi--layout--gutter--l;
    gap: var(--digi--layout--gutter);
  }
}