Generated by SassMeister.com.

input.scss

@mixin pre-focus-styles {
  outline: none;
  transition: box-shadow 0.15s;
}

// Apply within :focus
@mixin focus-styles {
  box-shadow: 0 0 0 2px var(--color-focusOutline), 0 0 0 6px var(--color-focusOutline-light);
}

// Shortcut for focus styles
@mixin focus {
  @include pre-focus-styles;

  &:focus {
    @include focus-styles;
  }
}

.overlay {
  $transition-time: 0.2s;

  position: fixed;
  display: flex;
  inset: 0;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-md);
  overflow-y: auto;
  background-color: var(--color-background-overlay);
  box-sizing: border-box;
  z-index: 9999;

  // animation
  opacity: 0;
  visibility: hidden;
  transition: all $transition-time;

  &--open {
    // animation
    opacity: 1;
    visibility: visible;
    transition: all 0s, opacity $transition-time;
  }
}

.modal {
  $sizes: (sm: 30rem, md: 40rem, fullscreen: 100%);

  border-radius: var(--borderRadius-md);

  @each $size, $width in $sizes {
    $rule: if($size == fullscreen, min-width, max-width);
    &--#{$size} { #{$rule}: $width; }
  }

  &__contents {
    position: relative;
    display: block;
    background: var(--color-background-primary);
  }

//   &__title { @include typography(headline, md); }
//   &__subtitle { @include typography(paragraph, md); }

  &__close {
    @include focus;

    position: relative;
    display: inline-flex;
    float: right;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-sm);
    color: var(--color-button-subtle-text);
    background-color: var(--color-button-subtle);
    border-radius: var(--borderRadius-round);
    border: 1px solid transparent;
    cursor: pointer;

    &:hover { background-color: var(--color-button-subtle-hovered); }
    &:active { background-color: var(--color-button-subtle-pressed); }
  }
}

output.css

.overlay {
  position: fixed;
  display: flex;
  inset: 0;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-md);
  overflow-y: auto;
  background-color: var(--color-background-overlay);
  box-sizing: border-box;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
}
.overlay--open {
  opacity: 1;
  visibility: visible;
  transition: all 0s, opacity 0.2s;
}

.modal {
  border-radius: var(--borderRadius-md);
}
.modal--sm {
  max-width: 30rem;
}
.modal--md {
  max-width: 40rem;
}
.modal--fullscreen {
  min-width: 100%;
}
.modal__contents {
  position: relative;
  display: block;
  background: var(--color-background-primary);
}
.modal__close {
  outline: none;
  transition: box-shadow 0.15s;
  position: relative;
  display: inline-flex;
  float: right;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-sm);
  color: var(--color-button-subtle-text);
  background-color: var(--color-button-subtle);
  border-radius: var(--borderRadius-round);
  border: 1px solid transparent;
  cursor: pointer;
}
.modal__close:focus {
  box-shadow: 0 0 0 2px var(--color-focusOutline), 0 0 0 6px var(--color-focusOutline-light);
}
.modal__close:hover {
  background-color: var(--color-button-subtle-hovered);
}
.modal__close:active {
  background-color: var(--color-button-subtle-pressed);
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}