/* --- TOKENS --- */
@import "30_tokens.css";

/**
  * 40_atoms.css
  *
  * INDEX
  * -----
  *
  * Logos
  * Typography...........Extends Typography Tokens
  * Links and Buttons
  * Icons
  * 
  */

/* ==========================================================================
   Atoms
   ========================================================================== */

/* Logos
   ========================================================================== */

/**
    * ...
    * Main Nav Logo, Icon Logo, ... (size, color/b&w)
    */

/* Main Nav Logo

<img class="ptt-nav__logo" 
src="assets/img/logos/logo-horizontal.svg"
alt="Plasttic Home" /> 
*/

/* Dynamic sized Main Nav logo */
@define-mixin main-nav-logo-dyn {
  height: max(5vw, 2.8rem);
  aspect-ratio: 336 / 90;
}

/* Typography
   ========================================================================== */

/**
    * HEADERS
    * h1, ...
    */

/* H1 headers

<h1>Main Title</h1> 
*/

@define-mixin h1-md {
  font-size: var(--ptt-fnt-size-header-h1);
  font-weight: var(--ptt-fnt-weight-header);
  line-height: var(--ptt-txt-line-height-200);
}

/* H2 headers

<h2>Secondary Title</h2> 
*/

@define-mixin h2-md {
  font-size: var(--ptt-fnt-size-header-h2);
  font-weight: var(--ptt-fnt-weight-header);
  line-height: var(--ptt-txt-line-height-200);
}

/* Links and Buttons
   ========================================================================== */

/**
    * LINKS
    * ...
    */

/* Links

<a href="">Link</a>
*/

@define-mixin link-md {
  color: var(--ptt-clr-neutral-900);
  font-weight: var(--ptt-fnt-weight-bold);

  &:visited {
    color: var(--ptt-clr-neutral-900);
    font-weight: var(--ptt-fnt-weight-bold);
  }

  &:hover,
  &:active,
  &:focus-visible {
    color: var(--ptt-clr-complement-red-400);
  }
}

/**
    * LINKS AS BUTTONS
    * Buttons, Links as buttons
    */

/* Rounded corners

  $background sets the button color
  Default: --ptt-clr-complement-red-400

  <a href="">Button</a>
*/

@define-mixin link-button-xl $background: var(--ptt-clr-complement-red-400) {
  padding: var(--ptt-padding-400);
  background: $background;
  border-radius: var(--ptt-border-radius-400);
  color: var(--ptt-clr-neutral-100);
  font-size: var(--ptt-fnt-size-500);
  font-weight: var(--ptt-fnt-weight-bold);
  text-decoration: none;
  white-space: nowrap;

  &:hover,
  :focus-visible {
    background: var(--ptt-clr-neutral-700);
  }
}

/* Icons
   ========================================================================== */

/**
    * SOCIAL ICONS
    * ...
    */