@layer components {
  .btn {
    --button-radius: var(--radius-full);

    --button-padding-y: var(--padding-xs);
    --button-padding-x: var(--padding-xs);

    --button-line-height: var(--size-5);
    --button-font-size: var(--fs-md);

    &.btn-sm {
      --button-padding-y: var(--padding-2xs);
      --button-padding-x: var(--padding-xs);

      --button-line-height: var(--lh-comfort);
      --button-font-size: var(--font-size-small);

      --hover-shadow-y: var(--size-1-5);
    }

    @media (min-width: 768px) {
      --button-line-height: var(--size-7);
      --button-font-size: var(--fs-xl);

      &.btn-md {
        --button-line-height: var(--size-6);
        --button-font-size: var(--fs-base);
      }
    }

    background-color: var(--element-bg);
    color: var(--element-text);
    border-radius: var(--button-radius);
    border: var(--element-border) !important;
    padding: var(--button-padding-y) var(--button-padding-x);
    line-height: var(--button-line-height);
    font-size: var(--button-font-size);
    display: block;
    transition: var(--button-transition);
    position: relative;
    cursor: pointer;

    &[disabled] {
      opacity: 0.8;
      pointer-events: none;
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: -2px;
      bottom: -2px;
      border-radius: inherit;
      background-color: transparent;
      pointer-events: none;
      transition: var(--button-transition);
      z-index: -1;

      @media (forced-colors: active) {
        content: none;
      }
    }

    &::after {
      content: "";
      position: absolute;
      top: var(--hover-shadow-y);
      left: var(--hover-shadow-x);
      right: calc(-1 * var(--hover-shadow-x));
      bottom: calc(-1 * var(--hover-shadow-y));
      border-radius: inherit;
      background-color: transparent;
      pointer-events: none;
      transition: var(--button-transition);
      z-index: -2;

      @media (forced-colors: active) {
        content: none;
      }
    }

    &:hover::before {
      background-color: var(--element-border-color);
    }
    &:hover::after {
      background-color: var(--shadow-neutral);
    }

    &:focus,
    &:focus-visible {
      box-shadow: none;
      outline: 3px solid var(--border-neutral);
      outline-offset: 0px;
    }

    span {
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .btn:where(:has(svg)) {
    display: flex;
    justify-content: center;
    gap: 0.5em;
    align-items: center;

    span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .btn:where(:not(:has(.icon))) {
    text-align: center;
    min-inline-size: 10ch;
  }
}