input,
select,
textarea {
    border: 2px solid var(--main-hover-color);
    transition-duration: .2s;
    border-radius: var(--border-radius);
    padding: 5px 10px;
    background: var(--background);
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;


    &:hover {
        border: 2px solid var(--main-color);
    }

    &:focus,
    &:active {
        border: 2px solid var(--main-color);
        outline: none;
    }
}

input[type="color"] {
    overflow: hidden;

    &::-webkit-color-swatch-wrapper {
        padding: 0px;
        width: calc(100% + 22px);
        height: calc(100% + 12px);
        margin-top: -6px;
        margin-left: -11px;
        outline: none;
        border: none;
    }
}