.knob {
    display        : flex;
    align-items    : center;
    justify-content: center;
    position       : relative;
    box-sizing     : border-box;
    outline        : 0;
    margin         : 0;
    padding        : 7px 30px 8px;
    cursor         : pointer;
    user-select    : none;
    text-decoration: none;
    font-size      : 1rem;
    font-weight    : 500;
    text-transform : none;
    min-width      : 64px;
    width          : auto;
    border-radius  : var(--rounded-default);
    transition     : background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    box-shadow     : none;
    border         : 1px solid
}

.knob.v-primary {
    background-color: var(--primary);
    color           : #fff;
    border-color    : var(--primary)
}

.knob.v-primary:hover {
    background-color: var(--primary-dark)
}

.knob.v-primary-dark {
    background-color: var(--primary-dark);
    color           : #fff;
    border-color    : var(--primary-dark)
}

.knob.v-primary-dark:hover {
    background-color: var(--primary-light);
    color           : #fff;
    border-color    : var(--primary-light)
}

.knob.v-secondary {
    background-color: var(--secondary);
    color           : #fff;
    border-color    : var(--secondary)
}

.knob.v-secondary:hover {
    background-color: var(--secondary-dark)
}

.knob.v-classic {
    background-color: var(--bg-zero);
    color           : var(--text);
    border-color    : var(--border)
}

.knob.v-classic:hover {
    background-color: var(--bg-one)
}

.knob.v-default {
    background-color: var(--slate-100);
    color           : var(--text);
    border-color    : var(--border)
}

.knob.v-default:hover {
    background-color: var(--slate-200)
}

.knob.v-text {
    background-color: rgba(0, 0, 0, 0);
    color           : var(--text);
    border-color    : rgba(0, 0, 0, 0)
}

.knob.v-text:hover,
.knob.v-text.active {
    color           : var(--primary-dark);
    background-color: rgba(var(--primary-light-rgb), 0.2)
}

.knob.v-colored {
    background-color: rgba(var(--primary-rgb), 0.2);
    color           : var(--primary-dark);
    border-color    : rgba(0, 0, 0, 0)
}

.knob.v-colored:hover {
    color           : var(--white);
    background-color: var(--primary)
}

.knob.v-outline {
    background-color: rgba(0, 0, 0, 0);
    color           : var(--primary-dark);
    border-color    : var(--primary)
}

.knob.v-outline:hover {
    color           : var(--white);
    background-color: var(--primary)
}

.knob.v-delete {
    background-color: var(--danger);
    color           : #fff;
    border-color    : var(--danger)
}

.knob.v-delete:hover {
    background-color: rgba(var(--danger-rgb), 0.7)
}

.knob.v-success {
    background-color: var(--success);
    color           : #fff;
    border-color    : var(--success)
}

.knob.v-success:hover {
    color           : var(--success);
    background-color: rgba(var(--success-rgb), 0.2)
}

.knob.fullwidth {
    width: 100%
}

.knob.no-padding {
    padding: 8px 15px 7px
}

.knob.is-link {
    padding: 0
}

.knob.is-link a {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 100%;
    padding        : 8px 30px 7px
}

.knob.is-link.no-padding a {
    padding: 8px 15px 7px
}

.knob.small {
    font-size: .8rem;
    height   : 32px
}

.knob svg {
    color      : currentColor;
    flex-shrink: 0
}

.knob svg.start-icon {
    margin: 0 10px 0 0
}

.knob svg.end-icon {
    margin: 0 0 0 10px
}

.knob.selected {
    background-color: var(--primary);
    color           : #fff;
    border-color    : var(--primary)
}

.knob.selected:hover {
    background-color: var(--primary-dark)
}

.knob input {
    position : absolute;
    top      : 0;
    right    : 0;
    margin   : 0;
    padding  : 0;
    opacity  : 0;
    width    : 100%;
    height   : 100%;
    font-size: 0;
    cursor   : pointer
}

.knob input::-webkit-file-upload-button {
    cursor: pointer
}

.knob:active {
    transform : scale(0.98);
    box-shadow: inset var(--shadow-sm)
}

.knob:disabled,
.knob.disabled {
    cursor        : default;
    pointer-events: none;
    filter        : grayscale(1)
}

@media(max-width: 576px) {
    .knob.mobilefull {
        flex-grow: 1;
        width    : 100%
    }
}

@media(max-width: 768px) {
    .knob.tabletfull {
        flex-grow: 1;
        width    : 100%
    }
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    position: relative;
    box-sizing: border-box;
    outline: 0;
    vertical-align: middle;
    color: var(--svg);
    text-align: center;
    text-transform: none;
    text-decoration: none;
    flex: 0 0 auto;
    font-size: 1em;
    border-radius: var(--rounded-md);
    overflow: visible;
    border: 1px solid rgba(0, 0, 0, 0);
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms
}

.icon-btn svg {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    flex-shrink: 0;
    margin-top: 1px;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms
}

.icon-btn.small {
    width: 34px;
    height: 34px
}

.icon-btn.small svg {
    width: 20px;
    height: 20px
}

.icon-btn.v-primary {
    background-color: var(--primary);
    border-color: var(--primary)
}

.icon-btn.v-primary:hover {
    background-color: var(--primary-dark)
}

.icon-btn.v-classic {
    background-color: var(--bg-zero);
    color: var(--svg);
    border-color: var(--border)
}

.icon-btn.v-classic:hover {
    background-color: var(--bg-one)
}

.icon-btn.v-default {
    background-color: var(--slate-100);
    color: var(--svg);
    border-color: var(--border)
}

.icon-btn.v-default:hover {
    background-color: var(--slate-200)
}

.icon-btn.v-text {
    background-color: rgba(0, 0, 0, 0);
    color: var(--svg);
    border-color: rgba(0, 0, 0, 0)
}

.icon-btn.v-text:hover,
.icon-btn.v-text.active {
    background-color: rgba(var(--primary-light-rgb), 0.2)
}

.icon-btn.v-text:hover svg,
.icon-btn.v-text.active svg {
    color: var(--primary-dark)
}

.icon-btn.v-colored {
    background-color: rgba(var(--primary-rgb), 0.2);
    border-color: rgba(0, 0, 0, 0)
}

.icon-btn.v-colored svg {
    color: var(--primary-dark)
}

.icon-btn.v-colored:hover {
    background-color: var(--primary)
}

.icon-btn.v-colored:hover svg {
    color: var(--white)
}

.icon-btn.v-outline {
    background-color: rgba(0, 0, 0, 0);
    border-color: var(--primary)
}

.icon-btn.v-outline svg {
    color: var(--primary-dark)
}

.icon-btn.v-outline:hover {
    background-color: var(--primary)
}

.icon-btn.v-outline:hover svg {
    color: var(--white)
}

.icon-btn.v-delete {
    background-color: var(--danger);
    border-color: var(--danger)
}

.icon-btn.v-delete svg {
    color: #fff
}

.icon-btn.v-delete:hover {
    background-color: rgba(var(--danger-rgb), 0.7)
}

.icon-btn.v-success {
    background-color: var(--success);
    border-color: var(--success)
}

.icon-btn.v-success svg {
    color: #fff
}

.icon-btn.v-success:hover {
    background-color: rgba(var(--success-rgb), 0.2)
}

.icon-btn.v-success:hover svg {
    color: var(--success)
}

.icon-btn.is-link {
    padding: 0
}

.icon-btn.is-link a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    width: 40px;
    height: 40px
}

.icon-btn.is-link.small {
    width: 34px;
    height: 34px
}