@import '~styles/config';

.info {
  &__title {
    font-family: $font-heading;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: $gutter;

    @media (min-width: $min-mobile) {
      font-size: 48px;
      font-weight: 700;
    }
  }

  &__wrapper {
    overflow: hidden;
    &.center {
      text-align: center;
    }
  }

  &__error {
    svg {
      margin: auto $gutter*0.5;
      display: block;
    }
  }

  &__emailWrapper {
    max-height: 210px;
    @media (min-width: $min-mobile) {
      max-height: 320px;
    }
  }

  &__scroller {
    width: calc(100% + #{$gutter * 4});
    margin-bottom: $gutter;
    margin-left: -$gutter * 2;
    padding: $gutter $gutter * 2 $gutter * 2;
    overflow-y: scroll;
  }

  &__email {
    &:hover {
      svg {
        path {
          transition: fill 150ms ease-in-out;
          fill: $color-pink;
        }
      }
    }
  }

  &__button {
    float: right;
  }

  &__input {
    font-size: 18px;
    font-weight: 700;
    margin-left: $gutter*0.5;
    border: none;
    background: white;
    outline: none;
    width: 100%;
  }

  &__center {
    * {
      margin: auto 0;
      display: block;
    }
    margin: auto $gutter*0.5;
    display: block;
  }

  &__cta {
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
    svg {
      margin-right: $gutter *0.5;
    }
  }

  &__hideInMobile {
    @media (max-width: $max-mobile) {
      display: none;
    }
  }
}