import { Breakpoint, Button as UIBUtton, styled } from "@solace-health/ui";

export const Container = styled.div`
  max-width: 30rem;
  border-radius: var(--Border-Radius-2xl, 1rem);
  border: 1px solid var(--Colors-Green-400, #bed3cc);
  background: var(--Colors-Base-White, #fff);
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
  padding: 44px 20px 20px 20px;
  overflow: hidden;

  header {
    color: rgb(16, 16, 16);
  }
`;

export const SubmitButton = styled(UIBUtton.Primary)`
  padding: var(--Spacing-md, 0.75rem) var(--Spacing-6xl, 4rem);

  path {
    transition: transform 0.2s ease-in-out;
  }

  &:hover {
    path {
      transform: translateX(0.25rem);
    }
  }

  @media ${Breakpoint.Medium} {
    && {
      width: auto;
    }
  }
`;