/* https://zpl.io/9Nqky9A */
.sw33-button {
  font-family: "Roboto", sans-serif;
  text-decoration: none;
  padding: 0.75rem 1.25rem;
  border-radius: 40px;
  font-size: 1.125rem;
  color: var(--neutral-white);
  font-weight: bold;
  background-color: var(--primary-black-600);
  display: inline-flex;
  border: solid 0.25rem var(--primary-black-600);
  align-items: center;
  fill: var(--primary-black-600);
  line-height: 1.33;
  white-space: nowrap;

  &:hover,
  &:focus {
    background-color: var(--primary-orange-400);
    border-color: var(--primary-orange-400);
    color: var(--primary-black-600);
    fill: var(--primary-orange-400);
  }

  &:active {
    background-color: var(--primary-orange-200);
    border-color: var(--primary-orange-200);
    color: var(--primary-black-600);
    fill: var(--primary-orange-200);
  }

  &.disabled {
    background-color: var(--neutral-gray-100);
    border-color: var(--neutral-gray-100);
    color: var(--neutral-white);
    fill: var(--neutral-gray-100);
    cursor: not-allowed;
    pointer-events: none;
  }

  svg {
    margin-left: 0.125rem;
    flex-shrink: 0;
    width: 19px;
  }

  path {
    fill: currentColor;
  }

  /* Background black or orange has different color palette */
  &.button-bg-black {
    background-color: var(--neutral-white);
    border-color: var(--neutral-white);
    color: var(--primary-black-600);

    &:hover,
    &:focus {
      background-color: var(--primary-orange-400);
      border-color: var(--primary-orange-400);
    }

    &:active {
      background-color: var(--primary-orange-200);
      border-color: var(--primary-orange-200);
    }

    &.disabled {
      background-color: var(--neutral-gray-400);
      border-color: var(--neutral-gray-400);
      color: var(--primary-black-600);
    }
  }

  &.button-bg-orange {
    background-color: var(--neutral-white);
    border-color: var(--neutral-white);
    color: var(--primary-black-600);

    &:hover,
    &:focus {
      background-color: var(--primary-black-600);
      border-color: var(--primary-black-600);
      color: var(--neutral-white);
    }

    &:active {
      background-color: var(--neutral-gray-400);
      border-color: var(--neutral-gray-400);
      color: var(--neutral-white);
    }

    &.disabled {
      background-color: var(--primary-orange-200);
      border-color: var(--primary-orange-200);
      color: var(--primary-orange-400);
    }
  }

  &.secondary {
    background-color: transparent;
    color: var(--primary-black-600);

    &.disabled {
      border-color: var(--neutral-gray-100);
      color: var(--neutral-gray-200);
    }

    &.button-bg-black {
      background-color: transparent;
      border-color: var(--primary-orange-400);
      color: var(--neutral-white);

      &:hover,
      &:focus {
        border-color: var(--neutral-white);
        color: var(--neutral-white);
      }

      &:active {
        border-color: var(--neutral-gray-200);
        color: var(--neutral-white);
      }

      &.disabled {
        border-color: var(--neutral-gray-400);
        color: var(--neutral-gray-300);
      }
    }

    &.button-bg-orange {
      background-color: transparent;
      border-color: var(--primary-black-600);
      color: var(--primary-black-600);

      &:hover,
      &:focus {
        border-color: var(--neutral-white);
      }

      &:active {
        border-color: var(--neutral-gray-100);
      }

      &.disabled {
        border-color: var(--primary-orange-300);
        color: var(--primary-orange-200);
      }
    }
  }

  &.secondary:hover,
  &.secondary:active {
    background-color: transparent;
    color: var(--primary-black-600);
  }

  &.tertiary {
    background: transparent;
    border-color: transparent;
    color: var(--secondary-blue-500);
    padding-left: 0;
    padding-right: 0;
    border: 0;

    &:hover,
    &:focus {
      text-decoration: underline;
    }

    &:active {
      color: var(--secondary-blue-600);
      text-decoration: none;
    }

    &.disabled {
      background-color: transparent;
      border-color: transparent;
      color: var(--neutral-gray-200);
    }

    &.button-bg-black {
      background-color: transparent;
      border-color: transparent;
      color: var(--neutral-white);

      &:hover,
      &:focus {
        color: var(--neutral-white);
      }

      &:active {
        color: var(--primary-orange-400);
      }

      &.disabled {
        color: var(--neutral-gray-300);
      }
    }

    &.button-bg-orange {
      background-color: transparent;
      border-color: transparent;
      color: var(--primary-black-600);

      &:hover,
      &:focus,
      &:active {
        color: var(--primary-black-600);
      }

      &.disabled {
        color: var(--primary-orange-200);
      }
    }
  }

  &.submit-spinner {
    g {
      fill: #fff;
    }
  }

  @media (max-width: 768px) {
    font-size: 1rem;
    line-height: 1.25;
  }

  @media (max-width: 300px) {
    white-space: normal;
  }
}