@mixin btn() {
    display: flex;
    font-size: 1em;
    border: none;
    padding: 10px 15px 10px 15px;
    border-radius: 20px;
    transition: all 0.1s linear;
    cursor: pointer;
}

.btn {
    @include btn;
}

.btn-sm {
    @include btn;
    padding: 4px 8px 4px 8px;
    svg {
        width: 20px;
        height: 20px;
    }
}

.btn.btn-sm {
    padding: 4px 8px 4px 8px;
    svg {
        width: 20px;
        height: 20px;
    }
}

$button_sizes: (
    "btn",
    "btn-sm",
);

@each $s in $button_sizes {
    .#{$s}.invert {
        color: var(--#{$prefix}-base) !important;
    }
    .#{$s}.invert:hover {
        color: var(--#{$prefix}-text) !important;
    }
}


.borderless-btn {
    @include btn;
    color: var(--#{$prefix}-text);
    background-color: var(--#{$prefix}-surface2);
}
.borderless-btn:hover {
    background-color: var(--#{$prefix}-overlay1);
    color: var(--#{$prefix}-nav-active-color);
}

.exit-btn {
    @include btn;
    color: var(--#{$prefix}-text);
    padding: 11px 11px 11px 11px;
    border-radius: $border-radius;
    background-color: var(--#{$prefix}-crust);
    height: fit-content;
    width: fit-content;
}
.exit-btn:hover {
    background-color: var(--#{$prefix}-surface0);
}