/*--------------------------------------------------------------------------*\
    Container of select
\*--------------------------------------------------------------------------*/

.control__field--select {
    /*box*/
    position: relative;
    cursor: pointer;
}

.control__field--select::before {
    /*box*/
    position: absolute;

    /*text*/
    content: '\25BE';
    text-align: center;
    color: var(--c-tertiary-1);

    /*transition*/
    -webkit-transition: color 0.5s;
    transition: color 0.5s;
}

.control__field--select:hover::before {
    /*text*/
    color: var(--c-cta-2);
}

/*--------------------------------------------------------------------------*\
        Arrow size
\*--------------------------------------------------------------------------*/

.control--tn .control__field--select::before {
    /*box*/
    top: 0px;
    right: 0px;
    width: 15px;

    /*text*/
    font-size: 16px;
}

.control--sm .control__field--select::before {
    /*box*/
    right: 2px;
    width: 17px;

    /*text*/
    font-size: 21px;
}

.control--md .control__field--select::before {
    /*box*/
    right: 5px;
    width: 20px;

    /*text*/
    font-size: 25px;
}

.control--lg .control__field--select::before {
    /*box*/
    top: 5px;
    right: 5px;
    width: 20px;

    /*text*/
    font-size: 25px;
}