picocss/scss/themes/default/_styles.scss

@use "sass:map";
@use "../../settings" as *;

// Commons Styles:
:root {
  // Typography
  #{$✨}font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell",
    "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  #{$✨}line-height: 1.5;
  #{$✨}font-weight: 400;
  #{$✨}font-size: 16px;

  // Responsive typography
  @if $enable-responsive-typography {
    @if map-get($breakpoints, "sm") {
      @media (min-width: map-get($breakpoints, "sm")) {
        #{$✨}font-size: 17px;
      }
    }

    @if map-get($breakpoints, "md") {
      @media (min-width: map-get($breakpoints, "md")) {
        #{$✨}font-size: 18px;
      }
    }

    @if map-get($breakpoints, "lg") {
      @media (min-width: map-get($breakpoints, "lg")) {
        #{$✨}font-size: 19px;
      }
    }

    @if map-get($breakpoints, "xl") {
      @media (min-width: map-get($breakpoints, "xl")) {
        #{$✨}font-size: 20px;
      }
    }
  }

  // Borders
  #{$✨}border-radius: 0.25rem;
  #{$✨}border-width: 1px;
  #{$✨}outline-width: 3px;

  // Spacings
  #{$✨}spacing: 1rem;

  // Spacings for typography elements
  #{$✨}typography-spacing-vertical: 1.5rem;

  // Spacings for body > header, body > main, body > footer, section, article
  #{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2);
  #{$✨}block-spacing-horizontal: var(#{$✨}spacing);

  @if ($enable-classes and $enable-grid) {
    #{$✨}grid-spacing-vertical: 0;
    #{$✨}grid-spacing-horizontal: var(#{$✨}spacing);
  }

  // Spacings for form elements and button
  #{$✨}form-element-spacing-vertical: 0.75rem;
  #{$✨}form-element-spacing-horizontal: 1rem;

  // Spacings for nav component
  #{$✨}nav-element-spacing-vertical: 1rem;
  #{$✨}nav-element-spacing-horizontal: 0.5rem;
  #{$✨}nav-link-spacing-vertical: 0.5rem;
  #{$✨}nav-link-spacing-horizontal: 0.5rem;

  // Font weight for form labels & fieldsets legend
  #{$✨}form-label-font-weight: var(#{$✨}font-weight);

  // Transitions
  #{$✨}transition: 0.2s ease-in-out;

  // Modal (<dialog>)
  #{$✨}modal-overlay-backdrop-filter: blur(0.25rem);
}

// Responsives spacings
@if $enable-responsive-spacings {
  // Sectioning
  #{$semantic-root-element} > header,
  #{$semantic-root-element} > main,
  #{$semantic-root-element} > footer,
  section {
    @if map-get($breakpoints, "sm") {
      @media (min-width: map-get($breakpoints, "sm")) {
        #{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2.5);
      }
    }

    @if map-get($breakpoints, "md") {
      @media (min-width: map-get($breakpoints, "md")) {
        #{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 3);
      }
    }

    @if map-get($breakpoints, "lg") {
      @media (min-width: map-get($breakpoints, "lg")) {
        #{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 3.5);
      }
    }

    @if map-get($breakpoints, "xl") {
      @media (min-width: map-get($breakpoints, "xl")) {
        #{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 4);
      }
    }
  }

  // Card (<article>)
  article {
    @if map-get($breakpoints, "sm") {
      @media (min-width: map-get($breakpoints, "sm")) {
        #{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.25);
      }
    }

    @if map-get($breakpoints, "md") {
      @media (min-width: map-get($breakpoints, "md")) {
        #{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.5);
      }
    }

    @if map-get($breakpoints, "lg") {
      @media (min-width: map-get($breakpoints, "lg")) {
        #{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.75);
      }
    }

    @if map-get($breakpoints, "xl") {
      @media (min-width: map-get($breakpoints, "xl")) {
        #{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 2);
      }
    }
  }

  // Modal
  dialog > article {
    #{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2);
    #{$✨}block-spacing-horizontal: var(#{$✨}spacing);

    @if map-get($breakpoints, "sm") {
      @media (min-width: map-get($breakpoints, "sm")) {
        #{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2.5);
        #{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.25);
      }
    }

    @if map-get($breakpoints, "md") {
      @media (min-width: map-get($breakpoints, "md")) {
        #{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 3);
        #{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.5);
      }
    }
  }
}

// Link
a {
  #{$✨}text-decoration: none;

  // Secondary & Contrast
  @if enable-classes {
    &.secondary,
    &.contrast {
      #{$✨}text-decoration: underline;
    }
  }
}

// Small
small {
  #{$✨}font-size: 0.875em;
}

// Headings
h1,
h2,
h3,
h4,
h5,
h6 {
  #{$✨}font-weight: 700;
}

h1 {
  #{$✨}font-size: 2rem;
  #{$✨}typography-spacing-vertical: 3rem;
}

h2 {
  #{$✨}font-size: 1.75rem;
  #{$✨}typography-spacing-vertical: 2.625rem;
}

h3 {
  #{$✨}font-size: 1.5rem;
  #{$✨}typography-spacing-vertical: 2.25rem;
}

h4 {
  #{$✨}font-size: 1.25rem;
  #{$✨}typography-spacing-vertical: 1.874rem;
}

h5 {
  #{$✨}font-size: 1.125rem;
  #{$✨}typography-spacing-vertical: 1.6875rem;
}

// Forms elements
[type="checkbox"],
[type="radio"] {
  #{$✨}border-width: 2px;
}

[type="checkbox"][role="switch"] {
  #{$✨}border-width: 3px;
}

// Table
thead,
tfoot {
  th,
  td {
    #{$✨}border-width: 3px;
  }
}

:not(thead, tfoot) > * > td {
  #{$✨}font-size: 0.875em;
}

// Code
pre,
code,
kbd,
samp {
  #{$✨}font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono",
    "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
}

kbd {
  #{$✨}font-weight: bolder;
}