import { styled } from 'styleh-components';
import { media } from '@skava/styleh-toolset';
import { Button } from '@skava/packages/ui';
import { EasyForm } from '@skava/packages/features/Forms';
export const ApplyButton = styled(Button).attrs({
    children: 'Apply',
}) `
  background-color: #115992;
  color: #FFFFFF;
  margin: 0.5rem 0px auto 0.5rem;
  cursor: pointer;
  align-items: center;
  text-transform: capitalize;
  height: 2.75rem;
  width: 9.375rem;
  justify-content: center;
  padding: 0px;
  font: 500 1.125rem Roboto, Arial, Helvetica, sans-serif;
  border-radius: 4px;
`;
export const StyledForm = styled(EasyForm) `
  display: flex
`;
export const ButtonGroup = styled.div ``;
export const inputBoxStyles = styled.css `
  .input-box {
    margin: 0.5rem 0;
  }
`;
export const GiftCardTitle = styled.header.attrs({
    'data-qa': 'gift-card-title-text',
    'children': 'Redeem a Gift Card',
}) `
  color: #B1B1B1;
  padding-bottom: 1rem;
  font: 700 1.25rem Roboto, Arial, Helvetica, sans-serif;
  ${media.phoneOrSmaller `
    padding-top: 1.5rem;
  `}
`;
export const GiftCardFormWrapper = styled.div.attrs({
    'data-qa': 'gift-card-form-wrapper',
}) `
  ${inputBoxStyles};
  display: flex;
  width: rem(620);
  ${media.tabletOrSmaller `
    width: 100%;
    .button-group {
      width: 24%;
    }
  `}
  .button-group {
    display: flex;
    align-items: center;
  }

  .gift-card-form {
    display: flex;
    border-bottom: 1px solid var(--color-white-grey);
    ${media.desktopOrLarger `
      border-bottom: 1px solid var(--color-light-grey);
    `}

    ${media.tabletOrSmaller `
      width: 100%;
    `}

    ${media.phoneOrSmaller `
      display: inline-block;
      padding-bottom: 1.5rem;
      margin-bottom: rem(14);
      .button-group {
        width: 100%;
      }
      .input-box-wrapper {
        margin-bottom: 0.5rem;
        vertical-align: top;
      }
    `}
    .input-box {
      border: 1px solid var(--color-light-grey);
      border-radius: 4px;
      height: 2.75rem;
    }

    .button {
      ${media.tabletOrLarger `
        margin-bottom: 0.5rem;
      `}
    }
  }
  .label-container {
    padding-bottom: 0.5rem;
    font: $font-16-regular;
    color: var(--color-black);
  }
  .gift-card-pin-container {
    margin-left: 0.5rem;
    width: rem(150);
    ${media.tabletOrSmaller `
      width: 24%;
    `}
    ${media.phoneOrSmaller `
      width: 30%;
      display: inline-block;
      margin-left: 1%;
    `}
    .input-box-wrapper {
      margin-top: 0px;
    }
  }
  .button-group .button {
    margin-left: 0.5rem;
    margin-right: 0;
    padding: 0;
    text-transform: capitalize;
    width: rem(150);
    font: $font-18-semi;
    background-color: var(--color-blue);
    border-radius: 4px;
    height: 2.75rem;
    ${media.phoneOrSmaller `
      margin: 0;
      width: 100%;
    `}
    ${media.tabletOrSmaller `
      width: 100%;
    `}
  }
  .gift-card-number-container {
    width: rem(250);
    ${media.tabletOrSmaller `
      width: rem(308);
    `}
    ${media.phoneOrSmaller `
      width: 69%;
      display: inline-block;
    `}
    .input-box-wrapper {
      margin-top: 0;
    }
  }
  ${media.tabletOrLarger `
    .input-error-message {
      position: absolute;
    }
  `}
  .input-error-message {
    display: flex;
  }
`;
//# sourceMappingURL=styled.js.map