@use "/src/scss/abstracts" as *;

.dropdown {
    position: relative;

    &-toggle {
        padding-left: $spacing-200;
        display: flex;
        gap: $spacing-200;
        color: $teal-default;
        font-size: $type-size-150;

        &:hover {
            text-decoration: underline;
        }

        icon {
            display: block;
            width: 7px;
            height: 4px;
            @include svg-100-deep;
            transform: translateY(-2px);
        }
    }

    .label {
        display: block;
        overflow: hidden;
        max-width: 10rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    &-menu {
        position: absolute;
        top: 1.25rem;
        left: 0;
        z-index: 1111;
        width: 363px;

        ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
            top: 0;
            height: 100%;
            input {
                height: 3rem;
                line-height: 3rem;
                font-size: clamp(0.87rem, 0.74rem + 0.62vw, 1.13rem);
                top: 5px;
                position: relative;
            }
        }
    }

    &-item {
        text-align: left;
        width: 100%;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 1rem;

        .short-name {
            display: block;
            font-weight: bold;
            font-size: $type-size-200;
            color: $primary;
        }

        .long-name {
            color: $gray-default;
            font-size: $type-size-100;
        }

        &:hover {
            background: $primary;

            .short-name,
            .long-name {
                color: $white;
            }
        }

        &__wrapper {
            & + .dropdown-item__wrapper {
                border-top: 1px solid rgba($black, 0.1);
            }

            &:first-of-type {
                .dropdown-item {
                    border-top-left-radius: 4px;
                    border-top-right-radius: 4px;
                }
            }

            &:last-of-type {
                .dropdown-item {
                    border-bottom-left-radius: 4px;
                    border-bottom-right-radius: 4px;
                }
            }
        }
    }
}
