/* ==========================================================
   BUTTON
   ========================================================== */


   /* ==========================================================================
   Base
   ========================================================================== */


.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding-block: 10px;
    padding-inline: 26px;

    border: 1px solid transparent;
    border-radius: var(--radius-full);

    font-size: var(--font-size-250);
    font-weight: var(--font-weight-450);
    line-height: 1;

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

/* ==========================================================
   BUTTON MODIFIERS
   ========================================================== */


   /* ==========================================================================
      Primary
      ========================================================================== */

   .button--primary {
       background-color: var(--button-primary-background);
       color: var(--button-primary-color);
   }

   .button--primary:hover {
       background-color: color-mix(
           in srgb,
           var(--button-primary-background) 90%,
           var(--color-primary)
       );
   }


   /* ==========================================================================
      Secondary
      ========================================================================== */

   .button--secondary {
       background-color: transparent;
       color: var(--button-secondary-color);

       border-color: var(--button-secondary-border);
   }

   .button--secondary:hover {
       background-color: rgba(255, 255, 255, 0.05);
       border-color: rgba(255, 255, 255, 0.8);
   }


   /* ==========================================================================
      States
      ========================================================================== */

   .button:active {
       opacity: 0.9;
   }

   .button:focus-visible {
       outline: 2px solid var(--color-accent);
       outline-offset: 4px;
   }


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1199px) {

    .button {
        font-size: var(--font-size-200);
    }

}