@import "variables";
@import "mixins";

.contact {
  .contact-hero {
    text-align: center;
    padding: $space-md;
  }
  .contact-info,
  .contact-form,
  .contact-map {
    padding-bottom: $space-md;
  }
  .contact-info {
    h6 {
      margin-bottom: $space-xs;
    }
    .info {
      position: relative;
      margin-bottom: $space-xs;
      white-space: pre-line;
      display: flex;
      .info-text {
        display: flex;
        flex-flow: column nowrap;
        padding-left: (5rem * 1.6);

        p {
          margin: 0;
        }
      }
      img {
        position: absolute;
        top: 50%;
        pointer-events: none;
        margin-left: (1rem * 1.6);
        transform: translate(0, -50%);
      }
    }
    hr {
      margin: $space-xs 0;
    }
  }
  .contact-form {
    .form-group {
      position: relative;
      margin-bottom: (1.5rem * 1.6);
      input:not([type="checkbox"]),
      textarea,
      select {
        width: 100%;
      }
      span.error {
        position: absolute;
        bottom: 0;
        transform: translate(0, 100%);
        font-size: $fs-small;
        color: $col-danger;
      }
      #gdpr-label a {
        text-transform: none;
        font-size: inherit;
      }
    }

    @include bp("sm") {
      button {
        width: 100%;
      }
    }
  }
  .billing-info {
    .billing-item {
      $label-width: 12rem !default;
      display: flex;
      align-items: flex-start;
      align-content: center;
      flex-wrap: wrap;
      flex-direction: row;
      margin-bottom: (1rem * 1.6);
      h6 {
        flex: 1 0 $label-width;
        max-width: $label-width;
        @include bp("md") {
          flex: 1 0 100%;
          max-width: 100%;
        }
      }
      span {
        flex: 1 0 calc(100% - #{$label-width});
        max-width: calc(100% - #{$label-width});
        @include bp("md") {
          flex: 1 0 100%;
          max-width: 100%;
        }
      }
    }
  }
}
