@if $useElementsComponent == true {
    // INPUT CLASS (INPUT, SELECT, TEXTAREA)
    %global-input-prop {
        @extend .width-100;
        @extend .fc-black-light;
        border: 1px solid $colorWhiteDarkest;
        border-radius: 4px;
        transition: 200ms ease-in border;
        font-size: inherit;
        @extend .bg-white;
        &:focus, &.focus {
            border-color: $colorFirst;
        }
    }
    .input {
        @extend .fs-md;
        textarea {
            resize: none;
            height: 10em;
            @extend .pad-10;
            @extend %global-input-prop
        }
        input, select {
            @extend %global-input-prop;
            display: block;
            height: 2.5em;
            padding: 0 0.7em;
            min-width: 280px;
            line-height: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        &.icon {
            @extend .relative;
            > label {
                @extend .absolute;
                @extend .left-0;
                width: 2.5em;
                background-color: $colorWhiteDarkest;
                @extend .top-0;
                @extend .height-100;
                @extend .align-center;
                border-radius: 4px 0 0 4px;
                transition: 200ms ease-in background;
                &:before {
                    transition: 200ms ease-in color;
                }
            }
            > input, > select {
                padding: 0 0.7em 0 calc(0.7em + 2.5em);
                &:focus + label {
                    background-color: $colorFirst;
                    @extend .fc-white;
                    &:before {
                        color: inherit;
                    }
                }
            }
            &.right {
                > label {
                    border-radius: 0 4px 4px 0;
                    left: auto;
                    @extend .right-0;
                }
                > input, > select {
                    padding: 0 calc(0.7em + 2.5em) 0 0.7em;
                }
            }
        }
        &.combine {
            @extend .flex-items;
            @extend .select;
            input {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
                @extend .gr;
                &:focus {
                    + select {
                        border-color: $colorFirst;
                    }
                    + label + select {
                        border-color: $colorFirst;
                    }
                }
                + select, + label + select {
                    max-width: fit-content;
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                    border-left-width: 0px;
                    padding-left: 15px;
                    padding-right: 30px;
                    &:focus {
                        border-color: $colorWhiteDarkest;
                    }
                }
            }
        }
        &.underline {
            @extend .relative;
            @extend .underline-effect;
            padding: 0;
            &:before {
                z-index: 1;
            }
            > input {
                border-top-width: 0;
                border-left-width: 0;
                border-right-width: 0;
                border-bottom-width: 2px;
                border-radius: 0 !important;
                transition: border 200ms ease-in;
                padding-left: 0 !important;
                background-color: transparent;
                box-shadow: unset;
                @extend .pad-30-r;
            }
            > label {
                background-color: transparent;
                width: unset;
                @extend .absolute;
                @extend .transform-center-y;
                right: 15px;
            }
            &:after {
                @extend .absolute;
                content: attr(data-placeholder);
                @extend .top-50;
                transform: translateY(-50%);
                @extend .left-0;
                display: inline-block;
                pointer-events: none;
                transition: 200ms all ease-in;
                @extend .fc-black-lighten;
            }
            &.focus {
                &:after {
                    @extend .fs-sm;
                    @extend .top-0;
                    color: $colorFirst;
                    transform: translateY(-75%);
                }
            }
            &.focus {
                > label {
                    background-color: transparent !important;
                    &:before {
                        color: $colorFirst !important;
                    }
                }
                > input {
                    border-bottom-color: transparent;
                }
            }

        }
        &.curved {
            > input, select {
                border-radius: 20px;
                padding: 0 0.75em;
            }
        }
        &.tiny {
            @extend .fs-xs;
        }
        &.small {
            @extend .fs-sm;
        }
        &.large {
            @extend .fs-lg;
        }
        &.big {
            @extend .fs-xl;
        }
        &.huge {
            @extend .hs-md;
        }
        &.massive {
            @extend .hs-lg;
        }
        &.success {
            border-color: $colorSuccess;
        }
        &.danger {
            border-color: $colorDanger
        }
        &.warning {
            border-color: $colorWarning
        }
        &.info {
            border-color: $colorInfo
        }
    }

    /* SELECT CUSTOM PROPERTY */
    .select {
        @extend .relative;
        @extend .fa-icon;
        @extend .fa-chevron-down;
        &::before {
            @extend .right-0;
            @extend .mar-10-r;
            @extend .transform-center-y;
            @extend .fc-black-lightness;
            @extend .fs-xs;
            pointer-events: none;
            background-color: transparent;
            transition: 250ms ease-out transform;
            will-change: transform;
        }
        select {
            padding-right: 30px;
            -moz-appearance: none;
            -webkit-appearance: none;
        }
    }

    /* CHECKBOX - RADIO COMPONENTS STYLES */
    .choose {
        font-size: 0;
        @extend .mar-15-b;
        display: inline-flex;
        align-items: center;
        > input {
            display: none;
            + label {
                @extend .align-center;
                @extend .fs-md;
                cursor: pointer;
                @extend .bg-white;
                border: 1px solid $colorWhiteDarkest;
                transition: 300ms ease-out all;
                &:before {
                    @extend .fa;
                    @extend .fa-check;
                    display: block;
                    @extend .fc-black-lightness;
                    transition: 300ms ease-out transform;
                    transform: scale(0, 0);
                    font-size: inherit;
                }
            }
            &:disabled {
                + label {
                    @extend .fa-times;
                    @extend .bg-white-darkness;
                    &::before {
                        transform: scale(1, 1);
                        @extend .fc-white-dark;
                    }
                }
            }
            &:checked {
                + label {
                    &::before {
                        transform: scale(1, 1);
                        content: "\F00C";
                    }
                }
            }
        }
        > .text {
            user-select: none;
            @extend .pad-5-l;
            cursor: pointer;
            line-height: 1;
            transition: 300ms ease-out color
        }
    }

    // Shape
    .choose-rectangle {
        > input {
            + label {
                width: 1.35em;
                height: 1.35em;
                border-radius: 1px;
            }
        }
    }
    .choose-circle {
        > input {
            + label {
                width: 1.50em;
                height: 1.50em;
                @extend .circle-shape;
            }
        }
    }

    // Size
    .choose-tiny {
        > input {
            + label {
                @extend .fs-xs;
            }
        }
    }
    .choose-small {
        > input {
            + label {
                @extend .fs-sm;
            }
        }
    }
    .choose-large {
        > input {
            + label {
                @extend .fs-lg;
            }
        }
    }
    .choose-big {
        > input {
            + label {
                @extend .fs-xs;
            }
        }
    }
    .choose-huge {
        > input {
            + label {
                @extend .hs-sm;
            }
        }
    }
    .choose-massive {
        > input {
            + label {
                @extend .hs-md;
            }
        }
    }

    // Color
    .choose-primary {
        > input {
            + label {
                &:before {
                    @extend .fc-white;
                }
            }
            &:checked {
                + label {
                    @extend .bg-first;
                    border: 1px solid darken($colorFirst, 6);
                    + .text {
                        color: $colorFirst;
                    }
                }
            }
        }
    }

    .choose-accordion {
        @include padding(10, 15);
        cursor: pointer;
        @extend .bg-white;
        box-shadow: 5px 3px 15px -2px rgba(0,0,0, .25);
        transition: 300ms ease-out max-height;
        max-height: 40px;
        overflow: hidden;
        @extend .mar-10-b;
        @extend .mar-0-last;
        .choose {
            @extend .width-100;
            @extend .mar-0-b;
            @extend .flex-items;
            @extend .relative;
            &::after {
                content: '';
                pointer-events: none;
                width: 3px;
                height: 10px;
                border-radius: 1px;
                @extend .bg-black-lighten;
                @extend .absolute;
                @extend .right-0;
                transition: 300ms ease-out all;
            }
            &::before {
                content: '';
                pointer-events: none;
                width: 3px;
                height: 10px;
                border-radius: 1px;
                @extend .bg-black-lighten;
                @extend .absolute;
                @extend .right-0;
                transform: rotate(90deg);
                transition: 300ms ease-out all;
            }
        }
        &.active {
            max-height: var(--active-accordion-height);
            > ul {
                opacity: 1;
            }
            .choose {
                &::before {
                    transform: rotate(120deg);
                    opacity: 0;
                }
                &::after {
                    transform: rotate(90deg);
                }
            }
        }
        > ul {
            opacity: 0;
            transition: 300ms ease-out opacity;
            @extend .pad-15-t;
            > li {
                @extend .mar-10-b;
                @extend .mar-0-last;
            }
        }
    }


    /* FILE INPUT */
    .file {
        display: inline-block;
        @extend .mar-10-r;
        max-width: 100%;
        > [type="file"] {
            display: none;
            + label {
                @extend .btn;
                &::before {
                    @extend .mar-10-r;
                    @extend .fa;
                    content: '\f093';
                }
            }
        }
        &.no-icon {
            > [type="file"] {
                + label {
                    &::before {
                        display: none;
                    }
                }
            }
        }
    }
    .file-outline {
        > [type="file"] {
            + label {
                @extend .btn-outline;
            }
        }
    }
    .file-link {
        > [type="file"] {
            + label {
                background-color: transparent;
                border-width: 0;
                transition: 150ms color linear;
                will-change: color;
                box-shadow: unset;
                &:hover {
                    background-color: transparent;
                    @extend .fc-black;
                }
            }
        }
    }
    .file-block {
        @extend .file-link;
        > [type="file"] {
            + label {
                display: flex;
                align-items: center;
                @extend .direction-y;
                &::before {
                    @extend .mar-0-r;
                    @extend .mar-10-b;
                    width: 2.25em;
                    height: 2.25em;
                    @extend .align-center;
                    @extend .bg-white;
                    @extend .circle-shape;
                }
            }
        }
    }
    .file-photo {
        @extend .width-100;
        > [type="file"] + label {
            width: 50%;
            @extend .relative;
            @extend .text-center;
            @extend .background-prop;
            padding: 0;
            &::after {
                @extend .block-item;
                @extend .width-100;
                content: '';
                padding-top: 45%;
            }
            &::before {
                @extend .wrap-out;
                @extend .align-center;
                @extend .mar-0;
                opacity: 0;
                transition: 400ms opacity ease-out;
                background-color: rgba(0,0,0, .5);
                color: $colorWhite;
            }
            &:hover {
                &::before {
                    opacity: 1;
                }
            }
        }

    }
}