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;
  }
}


.modal {
  &__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

.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
}