@layer components {
  .btn {
    background-color: var(--btn-bg-color, var(--color-accent));
    border: 1px solid var(--btn-border-color, var(--color-accent));
    border-radius: 0;
    color: var(--btn-color, var(--color-white));
    cursor: pointer;
    font-size: var(--btn-font-size, var(--text-smaller));
    font-weight: 500;
    line-height: var(--btn-line-height, var(--line-height-smaller));
    padding: var(--btn-padding, var(--block-space-half) var(--block-space));

    &:focus {
      --focus-ring-color: var(--color-accent);
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: 2px;
    }

    &:hover {
      filter: brightness(0.95);
    }
  }

  .btn--lg {
    --btn-font-size: var(--text-normal);
    --btn-line-height: var(--line-height-normal);
    --btn-padding: var(--block-space);
  }

  .btn--secondary {
    --btn-bg-color: transparent;
    --btn-border-color: var(--color-graphite);
    --btn-color: var(--color-graphite);

    &:focus {
      --focus-ring-color: var(--color-graphite);
    }

    &:hover {
      --btn-bg-color: var(--color-accent);
      --btn-border-color: var(--color-accent);
      --btn-color: var(--color-white);
    }
  }
}