/**
 * Copyright Â© 2021 O2TI. All rights reserved.
 * @author  Bruno Elisei <brunoelisei@o2ti.com>
 * See LICENSE.txt for license details.
 */

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .fieldset {
        input {
            &:focus {
                box-shadow: none;
            }
        }

        .field {

            &.theme-full-checkout-fields-floating-label {
                &:not(.choice) {
                    position: relative;

                    .control {
                        float: unset;
                        width: unset;

                        .control-row {
                            display: table;
                            width: 100%;
                        }

                        ._additional {
                            &-information {
                                display: table-cell;
                                width: 100%;
                            }

                            &-element-input {
                                display: table-cell;

                                input[type='text'],
                                input[type='password'],
                                input[type='url'],
                                input[type='tel'],
                                input[type='search'],
                                input[type='number'],
                                input[type='datetime'],
                                input[type='email'],
                                input[type='file'],
                                textarea,
                                select {
                                    background-color: @form-element-input__background;
                                    border-radius: @theme-full-checkout__border-radius;
                                    font-weight: 600;
                                    height: unset;
                                    padding-bottom: @theme-full-checkout-fields-label-floating-input__padding-bottom;
                                    padding-left: @theme-full-checkout-fields-label-floating-input__padding-left;
                                    padding-right: @theme-full-checkout-fields-label-floating-input__padding-right;
                                    padding-top: @theme-full-checkout-fields-label-floating-input__padding-top;
                                    width: 100%;
                                    

                                    &::focus {
                                        box-shadow: @theme-full-checkout__box-shadow;
                                    }

                                    &::placeholder {
                                        color: transparent;
                                    }

                                    &::input-placeholder {
                                        color: transparent;
                                    }

                                    &::input-placeholder {
                                        color: transparent;
                                    }

                                    &::placeholder {
                                        color: transparent;
                                    }
                                }

                                select:not(:checked),
                                input:not(:placeholder-shown),
                                textarea:not(:placeholder-shown),
                                select:focus,
                                input:focus,
                                textarea:focus {
                                    box-shadow: none;
                                    padding-bottom: calc(@theme-full-checkout-fields-label-floating-aixs-y / 3);
                                    padding-top: calc(@theme-full-checkout-fields-label-floating-aixs-y + @theme-full-checkout-fields-label-floating-aixs-y * (2 / 3));
                                }

                                select:not(:checked) ~ .label,
                                input:not(:placeholder-shown) ~ .label,
                                textarea:not(:placeholder-shown) ~ .label,
                                select:focus ~ .label,
                                input:focus ~ .label,
                                textarea:focus ~ .label {
                                    color: @theme__color__primary;
                                    font-size: @theme-full-checkout-fields-label-floating-label__font-size;
                                    padding-bottom: calc(@theme-full-checkout-fields-label-floating-aixs-y / 3);
                                    padding-left: @theme-full-checkout-fields-label-floating-input__padding-left;
                                    padding-top: calc(@theme-full-checkout-fields-label-floating-aixs-y / 3);
                                }

                                input[type='radio'] {
                                    box-shadow: none;
                                }

                                .label {
                                    color: @theme__color__primary;
                                    display: block;
                                    font-weight: normal;
                                    margin-bottom: 0;
                                    overflow: hidden;
                                    padding: @theme-full-checkout-fields-label-floating-aixs-y @theme-full-checkout-fields-label-floating-aixs-x;
                                    pointer-events: none;
                                    position: absolute;
                                    text-overflow: ellipsis;
                                    top: 0;
                                    transition: all .1s ease-in-out;
                                    white-space: nowrap;
                                    width: 70%;
                                }

                                div.mage-error[generated] {
                                    position: absolute;
                                }
                            }

                            &-element-addtional {
                                display: table-cell;
                                vertical-align: top;
                                width: 1%;
                            }
                        }

                        &._with-button {
                            ._additional {
                                &-element-addtional {
                                    button {
                                        border-bottom-left-radius: 0;
                                        border-radius: @theme-full-checkout__border-radius;
                                        border-top-left-radius: 0;

                                        &.icon-view-password {
                                            .lib-button(
                                                @_button-icon-use: true,
                                                @_button-icon-font-text-hide: true,
                                                @_button-icon-font-position: before,
                                                @_button-icon-font-vertical-align: middle,
                                                @_button-background: @form-element-input__background,
                                                @_button-background-hover: @form-element-input__background,
                                                @_button-background-active: @form-element-input__background,
                                                @_button-padding: @theme-full-checkout-fields-tooltip__padding
                                            );

                                            border-left-width: 0;

                                            &:hover,
                                            &:focus {
                                                background-color: @form-element-input__background;
                                                border-left-width: 0;
                                            }
                                            .lib-css(border-bottom-left-radius, 0);
                                            .lib-css(border-bottom-left-radius, 0);
                                            .lib-css(line-height, @theme-full-checkout-icon-view-password__line-height);

                                            /**
                                             * @codingStandardsIgnoreStart
                                             */
                                            .lib-icon-image(@_icon-image: @theme-full-checkout-icon-view__closed);
                                            .lib-icon-image-size(@theme-full-checkout-icon-view-password__width, @theme-full-checkout-icon-view-password__height);
                                            //  @codingStandardsIgnoreEnd
                                            &._view {
                                                .lib-icon-image(@_icon-image: @theme-full-checkout-icon-view__openned);
                                                /**
                                                 * @codingStandardsIgnoreStart
                                                 */
                                                .lib-icon-image-size(@theme-full-checkout-icon-view-password__width, @theme-full-checkout-icon-view-password__height);
                                                //  @codingStandardsIgnoreEnd
                                            }
                                        }
                                    }
                                }

                                &-element-input {
                                    input {
                                        border-bottom-right-radius: 0;
                                        border-right-width: 0;
                                        border-top-right-radius: 0;
                                    }
                                }

                                &-information {
                                    .password-strength-meter-label {
                                        font-size: @theme-full-checkout-fields-label-floating-label__font-size;
                                        padding-top: @indent__s;
                                    }

                                    .password-strength-meter {
                                        height: @indent__xs;
                                    }
                                }
                            }
                        }

                        &._with-tooltip {
                            ._additional {
                                &-element-addtional {
                                    .lib-button(@_button-background: @form-element-input__background, @_button-background-hover: @form-element-input__background, @_button-background-active: @form-element-input__background);
                                    border-color: @form-element-input__border-color;
                                    border-left-width: 0;
                                    border-radius: @theme-full-checkout__border-radius;
                                    border-top-left-radius: 0;
                                    display: table-cell;
                                    padding: @theme-full-checkout-fields-tooltip__padding;
                                    vertical-align: middle;
                                    width: 1%;
                                    .lib-css(border-bottom-left-radius, 0);
                                    .lib-css(border-top-left-radius, 0);

                                    &:hover,
                                    &:focus {
                                        background-color: @form-element-input__background;
                                        border-left-width: 0;
                                    }

                                    .field-tooltip {
                                        position: relative;
                                        right: unset;
                                        top: unset;

                                        .field-tooltip-action {
                                            &::before {
                                                line-height: 1;
                                                .lib-font-size(@theme-full-checkout-fields-tooltip-icon__font-size);
                                            }
                                        }
                                    }
                                }

                                &-element-input {
                                    input {
                                        border-bottom-right-radius: 0;
                                        border-right-width: 0;
                                        border-top-right-radius: 0;
                                    }
                                }
                            }
                        }
                    }

                    &._error {
                        animation: swing 2s ease;
                        animation-delay: 10s;
                        animation-iteration-count: 2;
                        .field-error {
                            background: @form-element-input__background;
                            border: 1px solid @error__color;
                            border-radius: 3px;
                            font-size: 10px;
                            font-weight: 500;
                            letter-spacing: .4px;
                            padding: @indent__s @indent__base;
                            position: relative;
                            z-index: 100;

                            &::before {
                                border-left: 8px solid transparent;
                                border-right: 8px solid transparent;
                                border-bottom: 8px solid @error__color;
                                content: ' ';
                                height: 0;
                                left: 26px;
                                position: absolute;
                                top: -8px;
                                width: 0;
                            }
                        }

                        &.theme-full-checkout-fields-floating-label {
                            .control {
                                ._additional {
                                    &-element-input {
                                        input[type='text'],
                                        input[type='password'],
                                        input[type='url'],
                                        input[type='tel'],
                                        input[type='search'],
                                        input[type='number'],
                                        input[type='datetime'],
                                        input[type='email'],
                                        input[type='file'],
                                        textarea,
                                        select {
                                            border-color: @theme-full-checkout-form-element-input-error__border-color;
                                        }

                                        select:not(:checked) ~ .label,
                                        input:not(:placeholder-shown) ~ .label,
                                        textarea:not(:placeholder-shown) ~ .label,
                                        select:focus ~ .label,
                                        input:focus ~ .label,
                                        textarea:focus ~ .label {
                                            color: @error__color;
                                        }
                                    }
                                }

                                &._with-button,
                                &._with-tooltip {
                                    ._additional {
                                        &-element-addtional {
                                            background-color: @form-element-input__background;
                                            border-color: @theme-full-checkout-form-element-input-error__border-color;

                                            button {
                                                background-color: @form-element-input__background;
                                                border-color: @theme-full-checkout-form-element-input-error__border-color;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            
        }
    }
}
