@import 'scss/font-family.scss';
@import 'theme/variables.scss';
@import 'scss/styles.scss';

::ng-deep app-ca-icon-dropdown {

    .icon-container {
        width: 26px;
        height: 26px;
        cursor: pointer;
        background-color: var(--icon-background-color, $grey-12);
        border-radius: 2px;

        .icon svg {
            display: block;
            width: 18px;
            height: 100%;

            path {
                fill: var(--icon-color, $grey);
            }
        }
    }
}

::ng-deep .dropdown-container {
    $font-size-14: 14px;

    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0px 10px 10px;
    border-radius: 3px;
    background-color: $ta-black-2;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-family: $font-family;
    font-size: $font-size-14;
    color: $white;
    transition: opacity 0.10s ease-in-out;
    opacity: 1;

    .list-item {
        padding: 4px 6px;
        cursor: pointer;

        &:hover {
            border-radius: 2px;
            background-color: $ta-black;
        }

        .check-mark svg {
            display: block;
            width: 14px;
            height: 14px;
        }
    }

    .dropdown-content {
        max-height: 200px;
        overflow-y: auto;
        padding-right: 10px;
        margin-right: 2px;

        .label {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: $white;
        }
    }

    .dropdown-content::-webkit-scrollbar {
        width: 2px !important;
    }

    .dropdown-content::-webkit-scrollbar-track {
        background: transparent !important;
    }

    .dropdown-content::-webkit-scrollbar-thumb {
        background: $grey !important;
        border-radius: 3px !important;
    }
}