@import "../../../styles/mixins.scss";

.button {
  padding: 0.6rem 2.671875rem;

  @media screen and (min-width: 640px) {
    padding: 0.6rem 3.5625rem;
  }

  font-weight: 600;

  &[class~="default"] {
    background-color: var(--white);

    border: 2px solid transparent;

    border-image-source: var(--gradient-0);
    border-image-slice: 1;

    [class~="text"] {
      @include text-gradiant;
      white-space: nowrap;
    }

    &:hover {
      background: var(--gradient-0);

      [class~="text"] {
        background: none;
        background-clip: none;
        -webkit-text-fill-color: inherit;
        color: white;
      }
    }
  }

  &[class~="green"] {
    background-color: var(--green-2);
    border: 2px solid var(--white);
  }

  &[class~="small"] {
    padding: 0.6rem 2.5rem;
  }

  &[class~="selected"] {
    background: var(--gradient-0) !important;

    [class~="text"] {
      background: none;
      background-clip: none;
      -webkit-text-fill-color: inherit;
      color: white;
    }
  }
}