/* Monorepo Styles
* These styles include elements that are shared across this repo as well as others included in the Web Awesome monorepo
 */

@layer wa-utils {
  :root {
    /* max-width for fixed width app-based pages
     * We round() these to avoid obscure component rendering bugs caused by widths with fractional pixels */
    --content-width-l: round(up, 132ch, 1px);
    --content-width-m: round(up, 110ch, 1px);
    --content-width-s: round(up, 80ch, 1px);
    --content-width-xs: round(up, 50ch, 1px);
    --content-padding-inline: 4ch;
    --content-flow-spacing: 8ch;

    --line-length-xs: 30ch;
    --line-length-s: 45ch;
    --line-length-m: 66ch;
    --line-length-l: 77ch;
    --line-length-xl: 90ch;
    --line-length-none: none;
  }

  /* #region brand utilities */
  .logo-webawesome {
    color: var(--wa-brand-orange);
  }
  /* #endregion */

  /* #region layout utilities */
  .content-container {
    margin-inline: auto;
    max-width: var(--max-width, var(--content-width-l));
    padding-inline: var(--content-padding-inline);
  }
  /* #endregion */

  /* #region Text utilities */
  .text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* line-length */
  .line-length {
    max-width: var(--line-length, none);
  }

  .line-length-xs {
    --line-length: var(--line-length-xs);
  }
  .line-length-s {
    --line-length: var(--line-length-s);
  }
  .line-length-m {
    --line-length: var(--line-length-m);
  }
  .line-length-l {
    --line-length: var(--line-length-l);
  }
  .line-length-xl {
    --line-length: var(--line-length-xl);
  }
  .line-length-none {
    --line-length: none;
  }
  /* #endregion */

  /* #region shared UI */
  /* pro badge */
  wa-badge.pro {
    color: var(--wa-color-brand-on-loud);
    background-color: var(--wa-brand-orange);

    + wa-tooltip {
      font-size: var(--wa-font-size-xs);
      --max-width: unset;
    }
  }

  /* free badge */
  wa-badge.free {
    + wa-tooltip {
      font-size: var(--wa-font-size-xs);
      --max-width: unset;
    }
  }

  /* planned badge */
  wa-badge.planned {
    background-color: var(--wa-color-neutral-fill-quiet);
    color: var(--wa-color-neutral-on-quiet);

    + wa-tooltip {
      font-size: var(--wa-font-size-xs);
      --max-width: unset;
    }
  }

  /* search trigger */
  wa-button#search-trigger {
    &::part(base) {
      background-color: var(--wa-form-control-background-color);
      border: var(--wa-form-control-border-width) var(--wa-form-control-border-style)
        var(--wa-form-control-border-color);
      box-shadow: none;
    }
    &::part(label) {
      text-align: start;
      width: 100%;
    }
  }
  #search-trigger kbd {
    font-size: var(--wa-font-size-2xs);
    line-height: var(--wa-form-control-value-line-height);
    padding-inline: 0.33em;
  }

  /* step icons for ordered instructions */
  .step-icon {
    --primary-color: var(--wa-color-neutral-20);
    --secondary-color: var(--wa-color-neutral-80);
    --secondary-opacity: 1;
    font-size: 2em;

    .wa-dark & {
      --primary-color: var(--wa-color-neutral-90);
      --secondary-color: var(--wa-color-neutral-30);
    }
  }

  /* anchor headings  */
  .anchor-heading a {
    opacity: 0;
    visibility: hidden;
    text-decoration: none;
    transition: opacity var(--wa-transition-normal) var(--wa-transition-easing);
  }

  @media (hover: hover) {
    .anchor-heading:hover a {
      opacity: 1;
      visibility: visible;
      padding: var(--wa-space-3xs);
    }
  }

  @media print {
    /* show URLs for printed links */
    a:not(.anchor-heading)[href]::after {
      content: ' (' attr(href) ')';
    }
  }
  /* #endregion */

  /* #region funsies + cosmetics */

  /* decorative underline emphasis */
  .appearance-underlined.variant-drawn {
    --underline-color: currentColor;
    position: relative;
    text-decoration: none;
    padding-bottom: 0.4em;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0.4em;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0,12 Q50,8 100,12' stroke='black' stroke-width='4' fill='none'/%3E%3C/svg%3E");
      mask-repeat: no-repeat;
      mask-size: 100% auto;
      mask-position: 0 100%;
      background-color: var(--underline-color);
    }
  }

  /* grid background */
  .background-grid {
    --grid-spacing: var(--wa-space-2xl);
    --grid-line-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 90%);
    --grid-line-width: var(--wa-border-width-s);
    --subgrid-spacing: calc(var(--grid-spacing) / 2);
    --subgrid-line-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 95%);
    --subgrid-line-width: var(--wa-border-width-s);

    background-image:
      /* main grid - vertical lines */
      linear-gradient(to right, var(--grid-line-color) var(--grid-line-width), transparent var(--grid-line-width)),
      /* main grid - horizontal lines */
        linear-gradient(to bottom, var(--grid-line-color) var(--grid-line-width), transparent var(--grid-line-width)),
      /* sub-grid - vertical lines (offset by half the main grid spacing) */
        linear-gradient(
          to right,
          var(--subgrid-line-color) var(--subgrid-line-width),
          transparent var(--subgrid-line-width)
        ),
      /* sub-grid - horizontal lines (offset by half the main grid spacing) */
        linear-gradient(
          to bottom,
          var(--subgrid-line-color) var(--subgrid-line-width),
          transparent var(--subgrid-line-width)
        );

    background-size:
      var(--grid-spacing) var(--grid-spacing),
      var(--grid-spacing) var(--grid-spacing),
      var(--subgrid-spacing) var(--subgrid-spacing),
      var(--subgrid-spacing) var(--subgrid-spacing);

    background-position:
      0 0,
      0 0,
      calc(var(--grid-spacing) / 2) calc(var(--grid-spacing) / 2),
      calc(var(--grid-spacing) / 2) calc(var(--grid-spacing) / 2);
  }

  /* dot grid background */
  .background-dot-grid {
    --dot-spacing: 1.5rem;
    --dot-radius: 1.5px;
    --dot-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 85%);

    background-image: radial-gradient(circle, var(--dot-color) var(--dot-radius), transparent var(--dot-radius));
    background-size: var(--dot-spacing) var(--dot-spacing);
  }

  /* wa illustration background pattern */
  .background-wa-pattern {
    position: relative;

    & > * {
      position: relative;
      z-index: 1;
    }

    &::after {
      --background-pattern-image: url('/assets/images/bg-wa-pattern.svg');

      position: absolute;
      inset: 0;
      background-color: var(--background-pattern-color, transparent);
      background-image: var(--background-pattern-image);
      background-repeat: repeat;
      content: '';
      opacity: var(--background-pattern-opacity, 0.3);
      z-index: 0;
    }
  }
  /* #endregion */

  /* buttons with icon toggle on hover */
  wa-button .icon-hover {
    display: none;
  }
  wa-button:hover .icon-default {
    display: none;
  }
  wa-button:hover .icon-hover {
    display: inline-flex;
  }
  /* #endregion */

  /* #region resets */
  code.appearance-plain {
    background: transparent;
    border: none;
  }

  a.appearance-plain {
    --wa-color-text-link: var(--wa-color-text-normal);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  ul,
  ol {
    &.appearance-plain {
      list-style: none;
      padding-inline-start: 0;

      li {
        padding-inline-start: 0;
      }
    }
  }

  /* increasing visual size of icons in certain contexts (such as in plain buttons) */
  wa-icon.icon-embiggen {
    font-size: round(1.125em, 1px);
  }

  /* decreasing visual size of icons in certain contexts (such as in sidebar nav) */
  wa-icon.icon-shrink {
    font-size: round(0.875em, 1px);
  }
  /* #endregion */
}
