// Resetar os estilos de lista

reset-list() {
    margin: 0;
    padding: 0;
    list-style: none;
}

// Background dos botões

btn-background(color) {
    background-image: url(s("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='306' height='216' viewBox='0 0 306 216'><path fill='%s' d='M0 10.2V216h306V10.2S287.3 0 271.5 0c-18.2 0-43.3 33.3-67.1 33.3S163.4 0 135 0 72.1 25.8 52.6 25.8 0 10.2 0 10.2z'/></svg>", color));
}

// Gutter nos diversos breakpoints

gutter-responsive(args...) {
    for bp in sm md lg xl {
        @media (min-width: lookup('$screen--' + bp)) {
            $arguments-total = length(args);

            if $arguments-total > 1 {
                for i in (0..($arguments-total)-1) {
                    {args[i]}: lookup('$gutter--' + bp);
                }
            }
            else {
                {args[0]}: lookup('$gutter--' + bp);
            }
        }
    }
}

// Scrollbar

scrollbar() {
    &::-webkit-scrollbar {
        width: 7px;

        &-thumb {
            background-color: #ccc;
            border-radius: .25em;
            transition: .2s ease-out;

            &:hover {
                background-color: darken(@background-color, 10%);
            }
        }

        &:horizontal {
            width: auto;
            height: 7px;
        }
    }
}

// Ellipsis

text-ellipsis() {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

// Estilo dos campos

$basic-field {
    display: block;
    -webkit-appearance: none;
    width: 100%;
    height: 60px;
    border-radius: 4px;
    border: solid 1px $color--gray-1;
    padding: 0 20px;
    background-color: #fff;
    box-shadow: none;
    font-size: 16px;
    transition: .4s;

    &:hover {
        border-color: $color--main;
    }
    
    &:focus {
        border-color: $color--main;
        border-width: 2px;
        padding-left: 19px;
    }
}

$input-field {
    @extend $basic-field;
    padding-top: 16px;
    font-weight: $font--bold;

    &::-webkit-input-placeholder {
        color: transparent;
    }
    &::-moz-placeholder {
        color: transparent;
    }
    &:-ms-input-placeholder {
        color: transparent;
    }
    &:-moz-placeholder {
        color: transparent;
    }

    &:hover, &:focus {
        & ~ .c-input__icon {
            color: $color--main;
        }
    }

    &:focus, 
    &:not(:placeholder-shown) {
        & ~ .c-input__label {
            top: 8px;
            transform: none;
            font-size: calc(1rem - 3px);
        }
    }
}

$select-field {
    @extend $basic-field;
    padding-right: 45px;
    color: $color--gray-1;

    &:hover, &:focus {
        & ~ .c-select__icon,
        & ~ .c-multi-select__icon {
            color: $color--main;
        }
    }
}

$input-icon {
    position: absolute;
    top: 30px;
    right: 10px;
    transform: translate(0, -50%);
    padding: 0;
    font-size: 24px;
    color: $color--gray-1;
    pointer-events: none;
    transition: .3s ease-out;
}

$select-icon {
    @extend $input-icon;
    right: 15px;
    font-size: 16px;
}


// Radiobutton

check-radio-button(box-color, txt-color = box-color, label-class = c-radio__label, box-class = c-radio__box, txt-class = c-radio__txt) {
    &:checked {
            
        // pinta a bolinha

        & ~ .{label-class} .{box-class},
        & ~ .{box-class} {
            box-shadow: inset 0 0 0 4px #fff;
        }
        
        // troca a cor ao selecionar

        & ~ .{label-class}, & ~ .{label-class} .{box-class},
        & ~ .{txt-class}, & ~ .{box-class} {
            color: box-color;
        }

        & ~ .{label-class} .{txt-class},
        & ~ .{txt-class} {
            color: txt-color;
        }
    }
}

focus-radio-button(color, label-class = c-radio__label, box-class = c-radio__box) {
    &:focus {
        & ~ .{label-class} .{box-class},
        & ~ .{box-class} {
            border-width: 2px;
            border-color: color;
        }
        &:checked {
            & ~ .{label-class} .{box-class},
            & ~ .{box-class} {
                box-shadow: inset 0 0 0 3px #fff;
            }
        }
    }
}


// Checkbox

check-checkbox(color, label-class = c-checkbox__label, box-class = c-checkbox__box, check-class = c-checkbox__check, txt-class = c-checkbox__txt) {
    &:checked {
            
        // mostra o check

        & ~ .{label-class}, & ~ .{box-class}{
            .{check-class} {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        // troca a cor ao selecionar

        & ~ .{label-class}, & ~ .{label-class} .{box-class},
        & ~ .{txt-class}, & ~ .{box-class} {
            color: color;
        }
    }
}

focus-checkbox(color, label-class = c-checkbox__label, box-class = c-checkbox__box) {
    &:focus {
        & ~ .{box-class},
        & ~ .{label-class} .{box-class} {
            border-width: 2px;
            border-color: color;
            padding: 2px;
        }
    }
}

// Input placeholder

placeholder() {
    &::-webkit-input-placeholder {
        {block}
    }
    &::-moz-placeholder {
        {block}
    }
    &:-ms-input-placeholder {
        {block}
    }
    &:-moz-placeholder {
        {block}
    }
}


// Popover

$popover {
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 15px 0 rgba(0,0,0,.15);
}