@layer components {
  .btn {
    border-radius: var(--radius-1);
    cursor: pointer;
    display: inline-block;
    font: inherit;
    padding: var(--size-2) var(--size-3);
    white-space: nowrap;

    &:disabled {
      opacity: 0.5;
    }
  }

  .btn\:center {
    text-align: center;
  }

  .btn\:text {
    text-decoration: none;
    color: var(--gray-12);
  }

  .btn\:solid {
    border-style: solid;
    border-width: 1px;
    background-image: linear-gradient(var(--gradient));
    box-shadow: inset 0 1px 3px 0 rgb(100% 100% 100% / 0.3);
  }

  .btn\:text.btn\:slate {
    background-color: var(--gray-1);
    color: var(--gray-8);

    &:hover {
      color: var(--gray-12);
      background-color: var(--gray-2);
    }
  }

  .btn\:solid.btn\:green {
    --gradient: var(--green-7), var(--green-9);
    border-color: var(--green-11);
    color: var(--green-0);

    &:hover {
      --gradient: var(--green-6), var(--green-8);
      border-color: var(--green-11);
      color: var(--green-0);
    }
  }

  .btn\:solid.btn\:blue {
    --gradient: var(--blue-6), var(--blue-7);
    border-color: var(--blue-9);
    color: var(--blue-0);

    &:hover {
      --gradient: var(--blue-6), var(--blue-6);
      border-color: var(--blue-8);
      color: white;
    }
  }

  .btn\:solid.btn\:red {
    --gradient: var(--red-7), var(--red-9);
    border-color: var(--red-11);
    color: var(--red-0);

    &:hover {
      --gradient: var(--red-6), var(--red-8);
      border-color: var(--red-11);
      color: var(--red-0);
    }
  }

  .btn\:solid.btn\:slate {
    --gradient: var(--gray-7), var(--gray-9);
    border-color: var(--gray-11);
    color: var(--gray-0);

    &:hover {
      --gradient: var(--gray-6), var(--gray-8);
      border-color: var(--gray-11);
      color: var(--gray-0);
    }
  }
}