@import "../../base";
@import "../../../govuk/objects/grid";

@include govuk-exports("idsk/component/subscription-form") {
  .idsk-subscription-form {
    .govuk-heading-xl {
      margin-bottom: govuk-spacing(3);
      @include govuk-media-query($until: tablet) {
        margin-bottom: govuk-spacing(2);
      }
    }

    &__description-text {
      @include govuk-typography-responsive($size: 27);
      margin-bottom: govuk-spacing(6);
    }

    .idsk-button {
      width: 100%;
      margin-bottom: 0;
      line-height: 32px;
      padding: 4px 4px 3px;
    }

    .govuk-form-group {
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
      position: relative;
    }

    &__input {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;

      .idsk-button, .govuk-input {
        height: 45px;
      }

      .idsk-button {
        width: 218px;
        box-shadow: none;
        -ms-flex-item-align: end;
            align-self: flex-end;
      }

      .govuk-input:focus {
        position: relative;
        z-index: 1;
      }
    }

    &__agreement-text {
      margin-bottom: 0;
    }

    &:not(&__subscription-confirmed) &__confirm-text {
      display: none;
    }

    .govuk-label {
      font-weight: 400;
      font-size: 1.2rem;
      line-height: 1.25;
      position: absolute;
      padding-left: govuk-spacing(2);
      padding-top: govuk-spacing(2);
      cursor: text;
      color: govuk-colour("dark-grey");
      bottom: 5px;
    }

    @include govuk-media-query($until: tablet) {
      &__description-text, &__input {
        margin-bottom: govuk-spacing(4);
      }

      &__input {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;

        .idsk-button {
          margin-top: govuk-spacing(4);
          width: 100%;
        }
      }
    }

    &__subscription-confirmed {
      form, .idsk-subscription-form__agreement-text, .idsk-subscription-form__default-text {
        display: none;
      }

      .idsk-subscription-form__description-text {
        margin-bottom: 0;
      }
    }
  }
}