import { styled } from 'styleh-components'
import { StyledLabel, StyledInput } from 'src/inputs/TextBox'
import { StyledHeading } from '../styled'

const Heading = styled.withComponent(StyledHeading).attrs({
  'data-qa': 'qa-sms-notification-heading',
})``

const Wrapper = styled.div.attrs({
  'data-qa': 'qa-sms-notification-container',
})`
  .form-wrapper {
    padding-top: rem(16);

    .input-form-wrapper {
      .input-form,
      label {
        font-size: rem(16);
        color: #2c2c2c;
      }
    }

    .group-container {
      display: flex;

      .input-form-wrapper {
        .input-form:disabled {
          background-color: rgb(235, 235, 228);
        }
      }

      ${StyledLabel} {
        text-transform: capitalize;
        font-size: rem(16);
        font-weight: 400;

        @phone-or-smaller() {
          font-size: rem(14);
        }
      }

      ${StyledInput} {
        font-size: rem(16);
        margin-top: rem(4);
      }

      .phone-number-wrapper {
        margin-right: rem(8);
        flex: 0 0 78%;
        max-width: rem(344);

        @tablet-or-smaller() {
          max-width: 100%;
        }
      }
      .extension-wrapper {
        flex: 0 0 calc(20% - 0.5rem);
        max-width: rem(77);

        @tablet-or-smaller() {
          max-width: 100%;
        }
      }
    }

    .send-sale-wrapper,
    .send-all-wrapper {
      margin-bottom: rem(32);

      @tablet-or-smaller() {
        margin-bottom: rem(24);
      }

      label {
        font-weight: 500;
        user-select: none;
        &:first-letter {
          text-transform: capitalize;
        }
      }
      svg {
        width: rem(18);
        height: auto;
        border-radius: rem(2);
      }
    }
  }
`

export { Heading, Wrapper }