.fhi-form-check-tile {
    margin-bottom: $fhi-core-space-3;
    position: relative;

    &__input {
        position: absolute;
        top: $fhi-core-px * 9;
        left: $fhi-core-px * 12;
        z-index: 1;

        &:checked {
            ~ .fhi-form-check-tile__label {
                background-color: $fhi-core-blue-grey-2;
            }

            &[type="radio"] {
                ~ .fhi-form-check-tile__label {
                    &::after {
                        left: $fhi-core-px * 12;
                        top: $fhi-core-px * 9;
                        z-index: 1;
                    }
                }
            }
        }

        &:disabled {
            ~ .fhi-form-check-tile__label {
                background-color: $fhi-core-white;
                border-color: $fhi-core-grey-3;
                box-shadow: 0 0 0 0.5px $fhi-core-grey-3;
            }
        }

        &.is-invalid ~ .fhi-form-check-tile__label {
            border-color: $form-feedback-invalid-color;
            box-shadow: 0 0 0 ($fhi-core-px * 0.5) $form-feedback-invalid-color
                inset;
        }
    }

    &__label {
        background-color: $fhi-core-white;
        border: 1px solid $fhi-core-blue-1;
        border-radius: $border-radius;
        box-shadow: 0 0 0 ($fhi-core-px * 0.5) $fhi-core-blue-1 inset;
        display: block;
        padding-top: $fhi-core-space-2;
        padding-right: $fhi-core-space-2;
        padding-bottom: $fhi-core-space-2;
        padding-left: $fhi-core-px * 44;
    }

    &__label-text {
        display: inline-block;
        font-size: $fhi-core-font-size-2;
        line-height: 1.125;
    }

    &__label-description {
        color: $fhi-text-ancillary;
        display: block;
        font-size: $fhi-core-font-size-1;
        line-height: 1.125;
        margin-top: $fhi-core-space-2;
    }
}