style.scss

@import '~variables';
$base-class: 'p-cdnLogServer';
$blue-light-warm: darken(desaturate(adjust-hue($blue-mid-light, 8), 71.19), 2.94);

.#{$base-class} {
    display: flex;
    flex-direction: column;
    align-items: center;

    &__logStatus,
    &__serverAddress {
        background-color: white;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        padding: 16px 20px;
    }
    &__lgsTitle {
        display: flex;
        align-items: center;
    }
    &__lgsToggle {
        flex-grow: 1;
        display: flex;
        align-items: center;
    }
    &__lgsTitleText {
        font-weight: $fw-bold;
        color: $dark-grey;
        margin-right: 27px;
    }
    &__lgsText {
        position: relative;
        font-size: 14px;
        font-weight: $fw-medium;
        color: $dark-grey;
        padding-top: 14px;
        padding-right: 18px;

        &::before {
            position: absolute;
            right: 0;
            content: ' ';
            display: block;
            width: 1px;
            height: 30px;
            background-color: $blue-light-warm;
        }
    }
    &__serverAddress {
        margin-top: 14px;
    }
    &__sdTitle {
        font-weight: $fw-bold;
        color: $dark-grey;
    }
    &__form {
        display: flex;
        flex-direction: column;
        margin-top: 15px;
    }
    &__inputs {
        display: flex;
        margin-left: 25px;
    }
    &__inputRow {
        position: relative;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        
        &--port {
            margin-right: 21px;
        }
    }
    &__validate {
        position: absolute;
        bottom: 6px;
        min-width: 100%;
    }
    &__input {
        height: 34.5px;
        border: 1px solid $blue-light-warm;
        border-radius: $primary-border-radius;
    }
    &__label {
        color: $gray-dark;
        font-size: 14px;
        font-weight: $fw-medium;

        &--port,
        &--host {
            margin-left: 14px;
        }
        &--protocol {
            margin-left: 14px;
        }
    }
    &__protocol {
        display: flex;
        padding-right: 45px;
    }
    &__portRadio {
        margin-top: 10px;
    }

    @include respond-to(xl) {
        &__form {
            flex-direction: row;
            align-items: center;
        }
        &__inputs {
            position: relative;
            flex-grow: 1;

            &::after {
                position: absolute;
                left: 0;
                content: ' ';
                display: block;
                width: 1px;
                height: 100%;
                background-color: $blue-light-warm;
            }
        }
        &__inputRow {
            min-width: 45%;
        }
        &__input {
            min-width: calc(100% - 40px);
        }
        &__protocol {
            display: flex;
            padding-right: 45px;
        }
        &__portRadio {
            margin-top: unset;
        }
    }
}
html.ltr {
    .#{$base-class} {
        &__lgsTitleText {
            margin-right: unset;
            margin-left: 27px;
        }
        &__lgsText {
            padding-right: unset;
            padding-left: 18px;
    
            &::before {
                right: unset;
                left: 0;
            }
        }
        &__label {
            &--port,
            &--host {
                margin-left: unset;
                margin-right: 14px;
            }
            &--protocol {
                margin-left: unset;
                margin-right: 14px;
            }
        }
        @include respond-to(xl) {
            &__protocol {
                padding-right: unset;
                padding-left: 45px;
            }
            &__inputs {
                &::after {
                    left: unset;
                    right: 0;
                }
            }  
        }
    }
}
:export {
    baseClass: #{$base-class}
}