$btn-palette: (
    prm: $prm,
    sec: $sec,
    ter: $ter,
);

$btn-base: 16;
$fs: em($btn-base);
$pd: em(10, $btn-base) em(15, $btn-base);

.ubx-btn {
    display: inline-flex;
    border-radius: 5px;
    padding: em(10) em(15);
    // font-size: $fs;
    line-height: 1.25;
    transition: 0.25s ease;

    &__inner {
        transition: 0.25s ease;
    }

    @include btnType('fill') {
        background: currentColor;
        box-shadow: inset 0 0 10px 0px rgba(black, 0.25);

        .ubx-btn__inner {
            color: color(wht);
        }

        @each $key, $clr in $btn-palette {
            &--#{$key} {
                color: color($key);

                &:hover {
                    color: color($key, 700);
                }
                &:active {
                    color: color($key, 900);
                }

                // .btn__inner {
                //     @if $key == wht {
                //         color: color(blk);
                //     }
                // }
            }
        }
    }
    // @include btnType('ghost') {
    //     background: transparent;
    //     box-shadow: inset 0 0 0 1px;

    //     @each $key, $clr in $clr-palette {
    //         &--#{$key} {
    //             color: color($key);

    //             &:hover, &:active {
    //                 background: currentColor;

    //                 .btn__inner {
    //                     color: color(if($key == wht, blk, wht));
    //                 }
    //             }
    //             &:active {
    //                 color: color($key, if($key == blk, 100, 700));
    //             }
    //         }
    //     }
    // }
    // @include btnType('twoTone') {
    //     position: relative;
    //     background: currentColor;
    //     overflow: hidden;

    //     &:hover, &:active {
    //         .btn__slide {
    //             left: -10%;
    //         }
    //     }
    //     &:active {
    //         .btn__slide {
    //             background: currentColor;
    //         }
    //     }

    //     .btn__slide {
    //         width: 120%;
    //         left: -90%;
    //         transform: skewX(-15deg);
    //         transition: 0.25s ease;
    //     }

    //     @each $key, $clr in $clr-palette {
    //         &--#{$key} {
    //             color: color($key);

    //             .btn {
    //                 &__slide {
    //                     background: if($key == blk, color(blk, 300), color($key, 700));
    //                 }
    //                 &__inner {
    //                     color: if($key == wht, color(blk), color(wht));
    //                 }
    //             }
    //         }
    //     }
    // }
    // &.disabled {
    //     opacity: 0.50;
    //     pointer-events: none;
    //     filter: grayscale(1);
    // }
}