.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.js-header-stick {
  .c-connected-modal {
    top: calc(64px);

    @screen xl {
      top: calc(96px);
    }
  }
}

.c-connected-modal {
  top: calc(64px);

  @screen xl {
    top: calc(128px);
  }
}

.c-form-input {
  @apply appearance-none bg-white border border-black text-sm py-3 px-4 text-black transition duration-150 ease-in-out;

  &::placeholder {
    @apply text-gray-600;
  }

  &--textarea {
    min-height: 128px;
  }
}

.c-form-checkbox {
  width: 24px;
  height: 24px;

  @apply m-0 opacity-100 border border-black appearance-none outline-none rounded-none;

  @screen xl {
    width: 40px;
    height: 40px;
  }

  &:checked {
    background-image: url('../images/tick.svg');
    background-size: 100% 100%;
    background-position: 50%;
    background-repeat: no-repeat;
  }
}

.c-connected-modal-close-btn {
  top: 8px;
  right: 0;

  @screen md {
    &:hover {
      transform: scale(1.2);
    }
  }
}

.c-connected-modal {
  @apply opacity-0 invisible;

  transform: translateY(-15px);

  &.js-active {
    @apply opacity-100 visible;

    transform: translateY(0);
  }
}