/*
 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
*/

html {
  interpolate-size: allow-keywords;
  scrollbar-color: var(--action) oklch(from var(--primary) calc(l * 3) c h);
  scrollbar-width: thin;
}

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

  & :focus-visible {    
    outline-style: solid;
    outline-color: var(--secondary);
    outline-width: .2em;
    outline-offset: calc(.75em/8);
  }

  & button:focus-visible {
    outline: .2em solid var(--secondary);
  }
}

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