@mixin base {
    .selecton {
        font-family: sans-serif;
        -ms-overflow-style: none;
        position: relative;

        ::-webkit-scrollbar {
            display: none;  // Safari and Chrome
        }

        * {
            box-sizing: border-box;
        }
        // TODO
        // *:not(input.selecton-search-input) {
        //     -webkit-touch-callout: none;
        //     -ms-touch-select: none;
        //     user-select: none;
        // }


        &.selecton-is-open {
            @if $render-caret == true {
                &::after {
                    border-bottom: 15px solid $dropdown-background-color;
                    border-left: 10px solid transparent;
                    border-right: 10px solid transparent;
                    content: '';
                    height: 0;
                    position: absolute;
                    right: 15px;
                    top: 100%;
                    width: 0;
                }
            }
        }

        &.selecton-is-open.selecton-select .selecton-input-group .selecton-input-group-suf > div {
            animation: rotate-from-0-to-45 350ms forwards;
            transform: rotate(0deg);

            @keyframes rotate-from-0-to-45 {
                0% {
                    transform: rotate(0deg);
                }

                100% {
                    transform: rotate(45deg);
                }
            }

            > span:nth-child(2) {
                @include fade-out(350ms );
            }

            > span:nth-child(3) {
                @include fade-out(350ms);
            }

            > span:nth-child(4) {
                animation: rotate-from-0-to-90-and-fade-in 350ms forwards;
                opacity: 0;
                transform: rotate(0deg);

                @keyframes rotate-from-0-to-90-and-fade-in {
                    0% {
                        opacity: 0;
                        transform: rotate(0deg);
                    }

                    100% {
                        opacity: 1;
                        transform: rotate(90deg);
                    }
                }
            }
        }

        &.selecton-add{
            div.selecton-input-group {
                @include input-group-add;
            }
        }

        &.selecton-select{
            div.selecton-input-group {
                @include input-group-select;
            }
        }


        div.selecton-dropdown {
            @include dropdown;
        }
    }

    ///////////////////////
    // CLONE
    ///////////////////////
    div.input-item-clone {
        @include input-item;
        animation: rotate-to-2 250ms forwards;
        cursor: move;
        font-family: sans-serif;
        line-height: 1.5em;
        position: absolute;
        transform: rotate(0deg);
    }

    @keyframes rotate-to-2 {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(2deg); }
    }

}