/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for Button component */
@layer components {
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-m);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    border: none;
    font-family: inherit;
    font-size: var(--size-step-0);

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

      &:hover {
        background-color: color-mix(in srgb, var(--color-primary), black 10%);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
      }

      &:active {
        transform: translateY(0);
      }
    }

    &.button--secondary {
      background-color: var(--color-surface);
      color: var(--color-text);
      border: 1px solid var(--color-border);

      &:hover {
        background-color: var(--color-body-bg);
        border-color: var(--color-primary);
      }
    }

    &.button--outline {
      background-color: transparent;
      color: var(--color-primary);
      border: 2px solid var(--color-primary);

      &:hover {
        background-color: var(--color-primary);
        color: white;
      }
    }
  }
}