@use '../../../../styles';

@layer components {
    .dropdown-menu {
        position: relative;
        flex: 0 0 auto;
        margin-left: auto;

        &._active .dropdown-menu__btn {
            color: styles.$primary;
        }

        .dropdown-menu__btn {
            @include styles.button-reset;
            display: block;
            color: styles.$neutral-600;
            transition: color styles.$trans-fast;

            &:hover {
                color: styles.$primary;
            }
        }

        .dropdown-menu__dropdown {
            top: 28px;
            right: 0;
            min-width: 160px;
            padding: 0 12px;
            width: max-content;
            z-index: 10;
        }

        .dropdown-menu__item {
            @include styles.button-reset;
            position: relative;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            width: 100%;

            &:not(:last-child) {
                border-bottom: 1px solid styles.$neutral-900;
            }

            &:disabled {
                opacity: .6;
                cursor: not-allowed;
            }

            &._danger {
                .dropdown-menu__item-icon,
                .dropdown-menu__item-content {
                    color: styles.$error;
                }
            }

            .dropdown-menu__item-icon {
                width: 20px;
                height: 20px;
                color: styles.$primary;

                > * {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }

            .dropdown-menu__item-content {
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                letter-spacing: 0.1px;
                color: #000;
            }
        }
    }
}
