_reset.scss

$box-sizing: border-box !default;
$scroll-behavior: smooth !default;

@mixin -font-unset {
  font: {
    family: unset;
    size: unset;
    weight: unset;
  }
  color: unset;
}

//region Mixins

@mixin figure {
  margin: 0;
  padding: 0;
}
@mixin picture {
  line-height: 0;
  font-size: 0;
}

// Meant to be used on a:any-link
@mixin link {
  color: unset;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

@mixin button {
  @include -font-unset;

  appearance: none;
  border: none;
  padding: 0;
  background: none;
  text-transform: unset;
  -webkit-tap-highlight-color: transparent;

  &[disabled] {
    cursor: not-allowed;
  }

  &:not([disabled]) {
    cursor: pointer;
  }
}

@mixin list() {
  list-style: none;
  padding: 0;
}

@mixin form-fieldset {
  padding: 0;
  border: none;
}
@mixin form-control($keep-number-spinner: false) {
  @include -font-unset;

  appearance: none;
  line-height: unset;
  background-color: unset;
  outline: none;
  border: none;
  border-radius: 0;
  min-width: 0;

  &[disabled] {
    -webkit-text-fill-color: currentcolor; /* iOS Safari */
    opacity: 1; /* iOS Safari: prevents background-color transparency */
  }

  @if not $keep-number-spinner {
    &[type=number] {
      -moz-appearance: textfield;

      &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }
  }
}
//endregion Mixins


//region Classes
@mixin classes {
  @at-root {
    a:any-link.unstyle {
      @include link;
    }
    button.unstyle
    {
      @include button;
    }

    :where(ul, ol).unstyle /* Safari 14+ */
    {
      @include list;
    }

    :where(input, select).unstyle /* Safari 14+ */
    {
      @include form-control;
    }

    fieldset.unstyle 
    {
      @include form-fieldset;
    }

    picture.unstyle {
      @include picture;
    }
  }
}
//endregion Classes


//region Rules
@mixin rules() {
  @at-root html {
    text-size-adjust: none;

    &, *, *::before, *::after { // Universal selector '*' has no effect on specificity
      margin: 0;
      box-sizing: $box-sizing;
      scroll-behavior: $scroll-behavior;
    }

    a:any-link { // :link or :visited that has [href]
      outline: none;
      -webkit-tap-highlight-color: transparent;
    }

    figure {
      @include figure;
    }

    picture {
      @include picture;
    }

    video:focus-within {
      outline: none;
    }
  }
}
//endregion Rules

@mixin styles {
  @include classes;
  @include rules;
}