@use "variables" as *;

:host {
    display: flex;
}

.theme-selector__data-list-item {
    cursor: pointer;
    display: flex;
    line-height: normal;
    padding: $spacing-3 $spacing-3;
    transition: background-color 150ms ease-in;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &:hover,
    &.highlight {
        background: $bg-highlight;
    }
    &.selected {
        font-weight: bold;
    }

    .dot-theme-item__image,
    .dot-theme-item__image--fallback {
        border-radius: $border-radius-xs;
        width: 3.43rem;
        height: 3.43rem;
    }
    .dot-theme-item__image--fallback {
        background: $bg-highlight;
        width: 3.43rem;
        height: 3.43rem;
        font-size: $font-size-xl;
        color: $color-palette-primary-400;
        text-transform: uppercase;
        text-align: center;
        line-height: 3.21rem;
        > span {
            line-height: 1;
            vertical-align: middle;
        }
    }
    .dot-theme-item__meta {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: $spacing-2;
        .dot-theme-item__label {
            display: inline-block;
            margin-bottom: $spacing-1;
        }
        .dot-theme-item__date {
            color: $color-palette-gray-800;
            font-size: $font-size-sm;
        }
        & > span {
            display: block;
        }
    }
}

dot-searchable-dropdown {
    width: 100%;
    display: block;
}

.theme-selector__filters {
    display: flex;
    margin: 0 $spacing-2;
    position: relative;

    dot-site-selector {
        margin-right: $spacing-2;
        display: block;

        // Required for shadow piercing. Required to force a style down to child components
        ::ng-deep {
            .site-selector__title {
                display: block;
                background: $color-palette-gray-300;
                border: 1px solid $color-palette-gray-500;
                border-radius: $border-radius-xs;
                padding: $spacing-2;
                font-size: $font-size-md;
                color: $color-palette-gray-800;
                text-overflow: ellipsis;
                min-width: 10rem;
                white-space: nowrap;
                overflow: hidden;
            }
        }
    }
}

.searchable-dropdown__search-section {
    flex-grow: 1;
    position: relative;

    input.searchable-dropdown__search-inputfield {
        width: 100%;
    }
}

.searchable-dropdown__search-icon {
    color: $color-palette-gray-700;
    position: absolute;
    right: $spacing-1;
    top: 9px;
}
