/*DropDown Mixins*/
@mixin menu-colors($text-color, $text-color-hover) {
    color: $text-color;
    &:hover {
        color: $text-color-hover;
    }
}
@mixin drop-down(
    $background-color,
    $text-color,
    $text-color-hover,
    $bar-color-hover
) {
    .ant-dropdown-menu {
        background: $background-color;
        color: $text-color;
        box-shadow: none;
        .ant-dropdown-menu-item.ant-dropdown-menu-item-active {
            background-color: $bar-color-hover;
        }
    }
    span {
        color: $text-color;
        font-size: 14px;
        line-height: 18px;
        font-weight: 400;
        letter-spacing: -0.02em;
        font-feature-settings: "ss03" on, "ss04" on, "ss01" on, "salt" on,
            "liga" off;
    }
    li {
        &:hover,
        &:focus,
        &.ant-dropdown-menu-item-selected {
            background-color: $bar-color-hover;
            span {
                color: $text-color-hover;
            }
        }
    }
}
/*DropDown Mixins*/
.starship-dropdown-text {
    @include menu-colors(var(--base-900), var(--base-1000));
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    letter-spacing: -0.02em;
    font-feature-settings: "salt" on, "ss01" on, "ss03" on, "ss04" on,
        "liga" off;
    svg {
        margin-left: 7px;
    }
}

/*primary menu style*/
.starship-dropdown-list-overlay {
    @include drop-down(
        var(--base-0),
        var(--base-800),
        var(--light-500),
        var(--base-300)
    );
    .ant-dropdown-menu {
        border-radius: 8px;
        overflow: hidden;
    }
    .red {
        span {
            color: var(--destructive-100) !important;
        }
        &:focus,
        &:hover,
        &.active {
            span {
                color: var(--destructive-200) !important;
            }
        }
    }
}
/*primary menu style*/
/*secondary menu style*/
.starship-dropdown-list-overlay {
    &.secondary {
        @include drop-down(
            var(--base-300),
            var(--base-800),
            var(--base-800),
            transparent
        );
        li {
            &:hover,
            &:focus,
            &.ant-dropdown-menu-item-selected {
                opacity: 0.7;
            }
        }
    }
}
/*secondary menu style*/

.ant-dropdown-open > .starship-btn .arrow-icon svg,
.ant-dropdown-open > .arrow-icon svg {
    transform: rotate(180deg);
}