@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.invert {
    color: var(--#{$prefix}-base) !important;
}
.btn.invert:hover {
    color: var(--#{$prefix}-text) !important;
}

.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;
    }
}

.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);
}


$colors: (
    "green",
);

@each $color in $colors {
    .btn.#{$color} {
        background-color: var(--#{$prefix}-#{$color});
    }
}