:root {
  --standardModal-maxWidth: 90vw;
  --standardModal-XS-min-maxWidth: 600px;
  --standarsModal-maxHeight: 90vh;
  --standardModal-border: 1px solid var(--color-neutral-300);
  --standardModal-Buttons-minWidth: 80px;
}

.StandardModal-container {
  display: flex;
  flex-direction: column;
  border: var(--standardModal-border);
  border-radius: 2px;
  background-color: var(--color-white);
  max-width: var(--standardModal-maxWidth);
  max-height: var(--standarsModal-maxHeight);

  & .StandardModal-image {
    max-width: 100%;
  }

  @media (--screen-XS-min) {
    max-width: var(--standardModal-XS-min-maxWidth);

    &.StandardModal-container--wide {
      max-width: 100%;
    }
  }
}

.StandardModal-header {
  display: flex;
  align-items: center;
  padding: 0 var(--space-2x);

  @media (--screen-XS-min) {
    padding: 0 var(--space-3x);
  }

  & .StandardModal-title {
    margin: var(--space-2x) 0;
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    @media (--screen-XS-min) {
      font-size: 24px;
      font-weight: 500;
    }
  }

  & .StandardModal-close {
    margin-left: auto;
    cursor: pointer;
  }
}

.StandardModal-content {
  overflow-y: auto;
  padding: var(--space-2x) var(--space-2x);
  border-top: var(--standardModal-border);

  @media (--screen-XS-min) {
    padding: var(--space-3x) var(--space-3x);
  }
}

.StandardModal-footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-top: var(--standardModal-border);
  padding: var(--space-2x);
  align-items: center;

  @media (--screen-XS-min) {
      flex-wrap: nowrap;
      padding: var(--space-2x) var(--space-3x);
  }

  & .Button {
    min-width: var(--standardModal-Buttons-minWidth);
  }

  &:empty{
    border-top: none;
    padding: 0;
  }

  & .StandardModal-buttonWrapper {
    display: flex;
    margin-left: auto;
  }

  & .StandardModal-primaryButton {
    margin-left: var(--space-2x);
  }

  & .StandardModal-hint {
    flex: 0 0 100%;
    margin: 0 var(--space-3x) var(--space-2x) 0;

    @media (--screen-XS-min) {
      flex: initial;
      margin-bottom: 0;
    }
  }
}