@use '~@/style/globals';

.CalendarGlobalSettings {
    &__section {
        margin-top: globals.$content-padding-large-vertical;

        .FormField {
            + .FormField {
                margin-top: globals.$content-padding-small-vertical;
            }

            @media screen and (min-width: globals.$screen-tablet) {
                $label-width: 250px;

                &__label {
                    flex-basis: $label-width;
                }

                &__help,
                &__error__text {
                    padding-left: $label-width;
                }
            }
        }
    }

    &__help {
        margin-bottom: 20px;
        white-space: pre-line;
    }

    &__actions {
        margin-top: globals.$content-padding-large-vertical;
        text-align: center;
    }

    &__public-calendar-url {
        &__help {
            line-height: 1.65;

            .Button {
                margin-left: 0.45rem;
                padding: 0.35rem 0.6rem;
            }

            &--success {
                color: globals.$text-success-color;
            }
        }
    }
}
