/* scratch css */
.bg-tint1 {
  background: var(--N1);
}

.bg-tint2 {
  background: var(--N2);
}

.bg-green {
  background: #43af79;
}

.color-white {
  color: white;
& h1,
& h2,
& h3,
& h4,
& h5,
& h6,
& p {
    color: white;
  }
}

.clearfix {
&::after,
&::before {
   content: '';
   clear: both;
   display: table;
 }
}

.bg-dark {
  background: var(--N9);
}

.border-bottom-default {
  border-bottom: 1px solid var(--color-border-default);
}

.border-bottom-muted {
  border-bottom: 1px solid var(--color-border-muted);
}

.focus-ring-link {
  position: relative;

&:focus-visible::after {
   content: '';
   display: block;
   position: absolute;
   top: -4px;
   left: -6px;
   right: -6px;
   bottom: -4px;
   box-shadow: 0 0 0 2px var(--B6A);
   border-radius: 3px;
 }
}

.focus-ring-link-white {
  position: relative;

&:focus-visible {
   border-bottom: none;
 }

&:focus-visible::after {
   content: '';
   display: block;
   position: absolute;
   top: -4px;
   left: -6px;
   right: -6px;
   bottom: -4px;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
   border-radius: 3px;
 }
}