.btn,
.btn-burger,
.field input[type=file]::file-selector-button {
    @extend %normalize_block;
    @extend %normalize_text;
    @extend %normalize_action_mouse;
    @extend %normalize_size;
    @include space($name: "padding", $direction: "vertical", $value: var(--btn-padding-vertical));
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: $base-line-height;
    color: var(--var-text-color);
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    user-select: none;
}


.btn {
    @include space($name: "padding", $direction: "horizontal", $value: var(--btn-padding-horizontal));
    
    font-family: var(--btn-font-family);
    background-color: var(--var-bg-color);
    border-radius: var(--btn-raduis);
    box-shadow: var(--btn-box-shadow);

    > .icon:first-of-type:not(:last-of-type) {
        margin-right: $btn-icon-margin-horizontal;
    }
    > .icon:last-of-type:not(:first-of-type) {
        margin-left: $btn-icon-margin-horizontal;
    }
}


.btn.link {
    background-color: transparent;
    color: var(--var-bg-color);
    border-color: var(--var-bg-color);

    &:hover {
        text-decoration: underline;
        opacity: .8;
        box-shadow: 0 0 0 em(1) rgba(0, 0, 0, .25) inset;
    }
}


.btn.outline {
    background-color: transparent;
    color: var(--var-bg-color);
    border-color: var(--var-bg-color);

    &:hover{
        background-color: var(--var-bg-color);
        color: var(--var-text-color);
        border-color: transparent;
    }
}


.btn-burger {
    background-color: transparent !important;
}