.button {
  appearance: none;
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background linear 0.33s;

  &.default {
    border: 1px solid #b9b9b9;
    background: linear-gradient(
      180deg,
      rgb(246 246 246) 0%,
      rgb(241 241 241) 100%
    );

    &:hover,
    &:focus-visible {
      background: linear-gradient(
        180deg,
        rgb(255 255 255) 0%,
        rgb(250 250 250) 100%
      );
    }

    &:active {
      background: linear-gradient(
        180deg,
        rgb(241 241 241) 0%,
        rgb(246 246 246) 100%
      );
    }
  }
  &.primary {
    border: 1px solid #00aaff;
    background: linear-gradient(
      180deg,
      rgb(133 216 255) 0%,
      rgba(59, 190, 255, 1) 100%
    );

    &:hover,
    &:focus-visible {
      background: linear-gradient(
        180deg,
        rgb(145 220 255) 0%,
        rgb(84 198 255) 100%
      );
    }

    &:active {
      background: linear-gradient(
        180deg,
        rgb(77, 196, 255) 0%,
        rgb(124, 213, 255) 100%
      );
    }
  }
  &.secondary {
  }
}