@import "../../Styles/variables/colors.scss";
/*general*/
@mixin turncate {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    white-space: nowrap;
}
/*general*/

/*All Button Sizes*/
@mixin no-shadow {
    text-shadow: none;
    box-shadow: none;
}
@mixin btn-colors($bg_color, $text_color) {
    background-color: $bg_color !important;
    background: $bg_color;
    color: $text_color !important;
    border: 2px solid $bg_color;
    &.ant-btn-loading {
        svg {
            fill: $text_color;
        }
    }
}
.starship-v2 {
    .starship-btn {
        &:focus-visible {
            outline: 0px !important;
        }
        .badge {
            padding: 2px 4px;
            font-weight: 500;
            border-radius: 4px;
            font-size: 8px;
            line-height: 10px;
            text-transform: uppercase;
            font-feature-settings:
                "calt" off,
                "liga" off;
            letter-spacing: 0.423px;
        }
        &.ant-btn,
        * {
            transition: 0s !important;
        }
        &.ant-btn {
            font-weight: 500;
            font-size: 13px;
            line-height: 16px;
            padding: 6px 8px;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-feature-settings:
                "calt" off,
                "liga" off;
            gap: 8px;
            &.ant-btn-loading {
                :before {
                    background-color: transparent;
                }
            }
            &:after {
                /*this will remove on click after/shadow*/
                display: none;
            }
            svg {
                font-size: 16px;
                vertical-align: middle;
            }
            & > .anticon + span,
            & > span + .anticon {
                margin-left: 0px;
            }
            .ant-btn-loading-icon {
                display: none !important;
            }
        }
        &.ant-btn-lg {
            font-weight: 600;
            font-size: 13px;
            line-height: 16px;
            padding: 8px 8px;

            svg {
                font-size: 16px;
            }
            & > .anticon + span,
            & > span + .anticon {
                margin-left: 0px;
            }
        }
        &.ant-btn-sm {
            font-weight: 500;
            font-size: 13px;
            line-height: 14px;
            padding: 4px 6px;
            & > .anticon + span,
            & > span + .anticon {
                margin-left: 0px;
            }
        }
        /*All Button Sizes*/
        /*All Buttons Styles*/
        /*round btn*/
        &.starship-btn {
            &.round {
                border-radius: 50%;
                padding: 0;
                height: 32px;
                width: 32px;
                &.ant-btn-lg {
                    height: 40px;
                    width: 40px;
                }
                &.ant-btn-sm {
                    height: 24px;
                    width: 24px;
                    svg {
                        font-size: 24px;
                    }
                }
            }
        }
        /*round btn*/

        /*ant primary  ==> Branding Button*/
        &.ant-btn-primary {
            .badge {
                background-color: var(--colorStaticLight);
                color: var(--base-600);
            }
            @include no-shadow;
            @include btn-colors(var(--brandPrimary), var(--colorStaticLight));
            &:focus:not(:focus-visible) {
                @include btn-colors(var(--brandPrimary), var(--colorStaticLight));
                &:hover {
                    @include btn-colors(var(--brandPrimaryactive), var(--colorStaticLight));
                }
            }
            &:focus {
                @include btn-colors(var(--brandPrimary), var(--colorStaticLight));
                border: 2px solid var(--brandPrimaryDark);
            }
            &:hover {
                @include btn-colors(var(--brandPrimaryactive), var(--colorStaticLight));
            }
            &:active,
            &.active,
            &:active:focus,
            &.active:hover,
            &.active:focus:hover,
            &.active:focus,
            &:focus:not(:focus-visible).active {
                @include btn-colors(var(--brandPrimaryDark), var(--colorStaticLight));
            }
            &.ant-btn-loading {
                opacity: 1;
                @include btn-colors(var(--brandPrimaryDark), var(--colorStaticLight));
                &:focus,
                &:hover,
                &:active,
                &.active {
                    @include btn-colors(var(--brandPrimaryDark), var(--colorStaticLight));
                }
                svg {
                    width: 32px;
                }
            }
            &[disabled] {
                @include btn-colors(var(--base-300), var(--base-600));
                opacity: 0.9;
                &:focus,
                &:hover,
                &:active,
                &.active {
                    @include btn-colors(var(--base-300), var(--base-600));
                }
                .badge {
                    background-color: var(--base-600);
                    color: var(--base-100);
                }
            }
        }
        /*ant primary  */

        /*starship-btn-positive Button ==> positive Button*/
        &.starship-btn-positive {
            .badge {
                background-color: var(--colorStaticLight);
                color: var(--base-600);
            }
            @include no-shadow;
            @include btn-colors(var(--colorPositive), var(--colorStaticLight));
            &:hover {
                @include btn-colors(var(--colorPositiveLight), var(--colorStaticLight));
            }
            &:active,
            &.active,
            &:active:focus,
            &.active:hover,
            &.active:focus:hover,
            &.active:focus,
            &:focus:not(:focus-visible).active {
                @include btn-colors(var(--colorPositiveDark), var(--colorStaticLight));
            }
            &:focus:not(:focus-visible) {
                @include btn-colors(var(--colorPositive), var(--colorStaticLight));
                &:hover {
                    @include btn-colors(var(--colorPositiveLight), var(--colorStaticLight));
                }
            }
            &:focus {
                @include btn-colors(var(--colorPositive), var(--colorStaticLight));
                border: 2px solid var(--colorPositiveDark);
            }
            &.ant-btn-loading {
                opacity: 1;
                @include btn-colors(var(--colorPositiveDark), var(--colorStaticLight));
                &:focus,
                &:hover,
                &:active,
                &.active {
                    @include btn-colors(var(--colorPositiveDark), var(--colorStaticLight));
                }
                svg {
                    width: 32px;
                }
            }
            &[disabled] {
                @include btn-colors(var(--base-300), var(--base-600));
                opacity: 0.9;
                &:focus,
                &:hover,
                &:active,
                &.active {
                    @include btn-colors(var(--base-300), var(--base-600));
                }
                .badge {
                    background-color: var(--base-600);
                    color: var(--base-100);
                }
            }
        }
        /*starship-btn-positive Button ==> positive Button*/

        /*starship-btn-negative Button ==> Red Button*/
        &.starship-btn-negative {
            .badge {
                background-color: var(--colorStaticLight);
                color: var(--base-600);
            }
            @include no-shadow;
            @include btn-colors(var(--colorNegative), var(--colorStaticLight));
            &:hover {
                @include btn-colors(var(--colorNegativeLight), var(--colorStaticLight));
            }
            &:active,
            &.active,
            &:active:focus,
            &.active:hover,
            &.active:focus:hover,
            &.active:focus,
            &:focus:not(:focus-visible).active {
                @include btn-colors(var(--colorNegativeDark), var(--colorStaticLight));
            }
            &:focus:not(:focus-visible) {
                @include btn-colors(var(--colorNegative), var(--colorStaticLight));
                &:hover {
                    @include btn-colors(var(--colorNegativeLight), var(--colorStaticLight));
                }
            }
            &:focus {
                @include btn-colors(var(--colorNegative), var(--colorStaticLight));
                border: 2px solid var(--colorNegativeDark);
            }
            &.ant-btn-loading {
                opacity: 1;
                @include btn-colors(var(--colorNegativeDark), var(--colorStaticLight));
                &:focus,
                &:hover,
                &:active,
                &.active {
                    @include btn-colors(var(--colorNegativeDark), var(--colorStaticLight));
                }
                svg {
                    width: 32px;
                }
            }
            &[disabled] {
                @include btn-colors(var(--base-300), var(--base-600));
                opacity: 0.9;
                &:focus,
                &:hover,
                &:active,
                &.active {
                    @include btn-colors(var(--base-300), var(--base-600));
                }
                .badge {
                    background-color: var(--base-600);
                    color: var(--base-100);
                }
            }
        }
        /*starship-btn-negative Button ==> Red Button*/

        /*starship-btn-neutral Button ==> Neutral Button*/
        &.starship-btn-neutral {
            .badge {
                background-color: var(--base-800);
                color: var(--base-100);
            }
            @include no-shadow;
            @include btn-colors(var(--base-400), var(--base-800));
            &:hover {
                @include btn-colors(var(--base-500), var(--base-1000));
                .badge {
                    background-color: var(--base-1000);
                    color: var(--base-100);
                }
            }
            &:active,
            &.active,
            &:active:focus,
            &.active:hover,
            &.active:focus:hover,
            &.active:focus,
            &:focus:not(:focus-visible).active {
                @include btn-colors(var(--base-400), var(--brandPrimary));
                .badge {
                    background-color: var(--brandPrimary);
                    color: var(--base-100);
                }
            }
            &:focus:not(:focus-visible) {
                @include btn-colors(var(--base-400), var(--base-800));
                .badge {
                    background-color: var(--base-800);
                    color: var(--base-100);
                }
                &:hover {
                    @include btn-colors(var(--base-500), var(--base-1000));
                    .badge {
                        background-color: var(--base-1000);
                        color: var(--base-100);
                    }
                }
            }
            &:focus {
                @include btn-colors(var(--base-400), var(--base-800));
                border: 2px solid var(--base-500);
                .badge {
                    background-color: var(--base-800);
                    color: var(--base-100);
                }
            }
            &.ant-btn-loading {
                opacity: 1;
                @include btn-colors(var(--base-400), var(--base-800));
                &:focus,
                &:hover,
                &:active,
                &.active {
                    @include btn-colors(var(--base-400), var(--base-800));
                }
                svg {
                    width: 32px;
                }
            }
            &[disabled] {
                @include btn-colors(var(--base-300), var(--base-600));
                opacity: 0.9;
                &:focus,
                &:hover,
                &:active,
                &.active {
                    @include btn-colors(var(--base-300), var(--base-600));
                }
                .badge {
                    background-color: var(--base-600);
                    color: var(--base-100);
                }
            }
        }
        /*starship-btn-neutral Button ==> Neutral Button*/

        /*starship-btn-ghost Button ==> Ghost Button*/
        &.starship-btn-ghost {
            .badge {
                background-color: var(--base-700);
                color: var(--base-100);
            }
            @include no-shadow;
            @include btn-colors(transparent, var(--base-700));
            &:hover {
                @include btn-colors(var(--base-300), var(--base-800));
                .badge {
                    background-color: var(--base-800);
                    color: var(--base-100);
                }
            }
            &:active,
            &.active,
            &:active:focus,
            &.active:hover,
            &.active:focus:hover,
            &.active:focus,
            &:focus:not(:focus-visible).active {
                @include btn-colors(transparent, var(--base-800));
                .badge {
                    background-color: var(--base-800);
                    color: var(--base-100);
                }
            }
            &:focus:not(:focus-visible) {
                @include btn-colors(transparent, var(--base-700));
                .badge {
                    background-color: var(--base-700);
                    color: var(--base-100);
                }
                &:hover {
                    @include btn-colors(var(--base-300), var(--base-800));
                    .badge {
                        background-color: var(--base-800);
                        color: var(--base-100);
                    }
                }
            }
            &:focus {
                @include btn-colors(transparent, var(--base-800));
                border: 2px solid transparent;
                .badge {
                    background-color: var(--base-800);
                    color: var(--base-100);
                }
            }
            &.ant-btn-loading {
                opacity: 1;
                @include btn-colors(transparent, var(--base-800));
                &:focus,
                &:hover,
                &:active,
                &.active {
                    @include btn-colors(transparent, var(--base-800));
                }
                svg {
                    width: 32px;
                }
            }
            &[disabled] {
                @include btn-colors(transparent, var(--base-600));
                opacity: 0.9;
                &:focus,
                &:hover,
                &:active,
                &.active {
                    @include btn-colors(transparent, var(--base-600));
                }
                .badge {
                    background-color: var(--base-600);
                    color: var(--base-100);
                }
            }
        }
        /*starship-btn-ghost Button ==> Ghost Button*/

        /*starship-btn-ghost Button ==> Tertiary Button*/
        &.starship-btn-tertiary {
            .badge {
                background-color: var(--colorStaticLight);
                color: var(--base-600);
            }
            @include no-shadow;
            @include btn-colors(var(--brandTertiary), var(--colorStaticLight));
            &:hover {
                @include btn-colors(var(--brandTertiaryLight), var(--colorStaticLight));
            }
            &:active,
            &.active,
            &:active:focus,
            &.active:hover,
            &.active:focus:hover,
            &.active:focus,
            &:focus:not(:focus-visible).active {
                @include btn-colors(var(--brandTertiaryDark), var(--colorStaticLight));
            }
            &:focus:not(:focus-visible) {
                @include btn-colors(var(--brandTertiary), var(--colorStaticLight));
                &:hover {
                    @include btn-colors(var(--brandTertiaryLight), var(--colorStaticLight));
                }
            }
            &:focus {
                @include btn-colors(var(--brandTertiary), var(--colorStaticLight));
                border: 2px solid var(--brandTertiaryDark);
            }
            &.ant-btn-loading {
                opacity: 1;
                @include btn-colors(var(--brandTertiaryDark), var(--colorStaticLight));
                &:focus,
                &:hover,
                &:active,
                &.active {
                    @include btn-colors(var(--brandTertiaryDark), var(--colorStaticLight));
                }
                svg {
                    width: 32px;
                }
            }
            &[disabled] {
                @include btn-colors(var(--base-300), var(--base-600));
                opacity: 0.9;
                &:focus,
                &:hover,
                &:active,
                &.active {
                    @include btn-colors(var(--base-300), var(--base-600));
                }
                .badge {
                    background-color: var(--base-600);
                    color: var(--base-100);
                }
            }
        }
        /*starship-btn-ghost Button ==> Tertiary Button*/

        /*starship-btn-secondary Button ==> Secondary Button*/
        &.starship-btn-secondary {
            .badge {
                background-color: var(--colorStaticLight);
                color: var(--base-600);
            }
            @include no-shadow;
            @include btn-colors(var(--brandSecondary), var(--colorStaticLight));
            &:hover {
                @include btn-colors(var(--brandSecondaryLight), var(--colorStaticLight));
            }
            &:active,
            &.active,
            &:active:focus,
            &.active:hover,
            &.active:focus:hover,
            &.active:focus,
            &:focus:not(:focus-visible).active {
                @include btn-colors(var(--brandSecondaryDark), var(--colorStaticLight));
            }
            &:focus:not(:focus-visible) {
                @include btn-colors(var(--brandSecondary), var(--colorStaticLight));
                &:hover {
                    @include btn-colors(var(--brandSecondaryLight), var(--colorStaticLight));
                }
            }
            &:focus {
                @include btn-colors(var(--brandSecondary), var(--colorStaticLight));
                border: 2px solid var(--brandSecondaryDark);
            }
            &.ant-btn-loading {
                opacity: 1;
                @include btn-colors(var(--brandSecondaryDark), var(--colorStaticLight));
                &:focus,
                &:hover,
                &:active,
                &.active {
                    @include btn-colors(var(--brandSecondaryDark), var(--colorStaticLight));
                }
                svg {
                    width: 32px;
                }
            }
            &[disabled] {
                @include btn-colors(var(--base-300), var(--base-600));
                opacity: 0.9;
                &:focus,
                &:hover,
                &:active,
                &.active {
                    @include btn-colors(var(--base-300), var(--base-600));
                }
                .badge {
                    background-color: var(--base-600);
                    color: var(--base-100);
                }
            }
        }
        /*starship-btn-secondary Button ==> Secondary Button*/

        /*starship-btn-link Button ==> link Button*/
        &.starship-btn-link {
            .badge {
                background-color: var(--base-800);
                color: var(--base-100);
            }
            @include no-shadow;
            @include btn-colors(transparent, var(--base-800));
            &:hover {
                @include btn-colors(transparent, var(--brandPrimaryactive));
                .badge {
                    background-color: var(--brandPrimaryactive);
                    color: var(--base-100);
                }
            }
            &:active,
            &.active,
            &:active:focus,
            &.active:hover,
            &.active:focus:hover,
            &.active:focus,
            &:focus:not(:focus-visible).active {
                @include btn-colors(var(--base-200), var(--base-900));
                .badge {
                    background-color: var(--base-900);
                    color: var(--base-100);
                }
            }
            &:focus:not(:focus-visible) {
                @include btn-colors(transparent, var(--base-800));
                .badge {
                    background-color: var(--base-800);
                    color: var(--base-100);
                }
                &:hover {
                    @include btn-colors(transparent, var(--brandPrimaryactive));
                    .badge {
                        background-color: var(--brandPrimaryactive);
                        color: var(--base-100);
                    }
                }
            }
            &:focus {
                @include btn-colors(transparent, var(--base-900));
                border: 2px solid transparent;
                .badge {
                    background-color: var(--base-900);
                    color: var(--base-100);
                }
            }
            &.ant-btn-loading {
                opacity: 1;
                @include btn-colors(transparent, var(--base-800));
                &:focus,
                &:hover,
                &:active,
                &.active {
                    @include btn-colors(transparent, var(--base-800));
                }
                svg {
                    width: 32px;
                }
            }
            &[disabled] {
                @include btn-colors(transparent, var(--base-600));
                opacity: 0.9;
                &:focus,
                &:hover,
                &:active,
                &.active {
                    @include btn-colors(transparent, var(--base-600));
                }
                .badge {
                    background-color: var(--base-600);
                    color: var(--base-100);
                }
            }
        }
        /*starship-btn-link Button ==> link Button*/
    }
}
.downIcon {
    margin-left: -4px;
    font-size: 16px;
}

/*All Buttons Styles*/

/*need to confirm from david
primary and green button    is  100 and i have used 600 badge 
need to confirm from david */