/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/
@layer web-atelier {
  html {
    interpolate-size: allow-keywords;
    scrollbar-color: var(--primary) oklch(from var(--primary) calc(l * 1.6) c h);
    scrollbar-width: thin;
  }
  #brx-header {
    padding-inline: var(--section-gutter);
  }
}

body.bricks-is-frontend {
  & :focus {
    outline: none;
  }

  & :focus-visible {
    outline: .1em dotted currentcolor;
    outline-offset: calc(.75em/8);
  }

  & button:focus-visible {
    outline: .1em dotted var(--base);
  }
}

.brxe-post-content a {
  --underline-thickness: .01em;
  transition: text-decoration-thickness 100ms ease-out;
  text-decoration: underline;
  text-decoration-thickness: var(--underline-thickness);
  text-decoration-skip-ink: auto;
  text-underline-offset: .2em;
  text-decoration-color: hsl(from var(--base) h s l / 80%);
}

.brxe-post-content a:hover {
  --underline-thickness: .2em;
  text-decoration: underline;
  text-decoration-thickness: var(--underline-thickness);
  text-decoration-skip-ink: auto;
  text-underline-offset: .2em;
}