﻿:root {
    --dnet-autocomplete-list-border-color: #ebebeb;
    --dnet-autocomplete-list-background-color: #ffffff;
    --dnet-autocomplete-list-border-radius: var(--dnet-component-border-radius);
    --dnet-autocomplete-list-item-height: var(--dnet-component-list-item-height);
    --dnet-autocomplete-list-padding-vertical: 4px;
    --dnet-autocomplete-list-padding-horizontal: 5px;
    --dnet-autocomplete-list-header-footer-height: 50px;
    --dnet-autocomplete-list-check-width: 24px;
    --dnet-autocomplete-list-prefix-suffix-min-width: 40px;
    --dnet-autocomplete-list-headline-font-size: var(--dnet-component-sm-font-size);
    --dnet-autocomplete-list-headline-text-color: var(--dnet-component-headline-text-color);
    --dnet-autocomplete-list-supporting-text-font-size: var(--dnet-component-xs-font-size);
    --dnet-autocomplete-list-supporting-text-color: var(--dnet-component-supporting-text-color);
    --dnet-autocomplete-list-hover-background-color: #f2f2f2;
    --dnet-autocomplete-list-hover-border-radius: 10px;
    --dnet-autocomplete-list-wrapper-horizontal-padding: 15px;
    --dnet-autocomplete-list-box-shadow: var(--dnet-component-box-shadow);
}

.dnet-autocomplete-list-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    border: 1px solid var(--dnet-autocomplete-list-border-color);
    border-radius: var(--dnet-autocomplete-list-border-radius);
    padding-top: var(--dnet-autocomplete-list-wrapper-horizontal-padding);
    padding-bottom: var(--dnet-autocomplete-list-wrapper-horizontal-padding);
    transition: opacity 0.5s ease-in-out;
    background-color: var(--dnet-autocomplete-list-background-color);
    box-shadow: var(--dnet-autocomplete-list-box-shadow);

    .dnet-item-fadeout {
        opacity: 0 !important;
    }
}

.dnet-autocomplete-list-wrapper:has(.dnet-autocomplete-list-footer) {
    padding-bottom: 0px;
}

.dnet-autocomplete-list-wrapper:has(.dnet-autocomplete-list-header) {
    padding-top: 0px;
}

.dnet-autocomplete-list-wrapper:has(.dnet-autocomplete-list-form + .dnet-autocomplete-list-header) {
    padding-top: var(--dnet-autocomplete-list-wrapper-horizontal-padding);
}

.dnet-autocomplete-list-form,
.dnet-autocomplete-list-header,
.dnet-autocomplete-list-footer {
    min-height: var(--dnet-autocomplete-list-header-footer-height);
    height: var(--dnet-autocomplete-list-header-footer-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dnet-autocomplete-list-padding-vertical) var(--dnet-autocomplete-list-padding-horizontal);
}

.dnet-autocomplete-list-form {
    display: none;
}

.dnet-autocomplete-list-form {
    padding: var(--dnet-autocomplete-list-padding-vertical) 20px;

    .dnet-form-field-plain-wrapper {
        margin-bottom: 0px;
    }

    .dnet-form-field-plain-control-container {
        border-radius: 15px;
    }
}

.dnet-autocomplete-list-header {
    padding-left: 20px;
    padding-right: 15px;
}

.dnet-autocomplete-list-header-content {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: calc(100% - 30px);
}

.dnet-autocomplete-list-header-text {
    font-weight: 500;
    font-size: small;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.dnet-autocomplete-list-items {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0 var(--dnet-autocomplete-list-padding-horizontal);
}

.dnet-autocomplete-list-item {
    display: flex;
    align-items: center;
    height: var(--dnet-autocomplete-list-item-height);
    padding-left: 15px;
    padding-right: var(--dnet-autocomplete-list-padding-vertical);
    padding-top: var(--dnet-autocomplete-list-padding-horizontal);
    padding-bottom: var(--dnet-autocomplete-list-padding-horizontal);
    overflow: hidden;
    transition: background-color 0.3s, border-radius 0.3s;
}

.dnet-autocomplete-list-item:has(.dnet-autocomplete-list-item-prefix) {
    padding-left: 0px;
}

.dnet-autocomplete-list-item:hover {
    background-color: var(--dnet-autocomplete-list-hover-background-color);
    border-radius: var(--dnet-autocomplete-list-hover-border-radius);
}

.dnet-autocomplete-list-item-prefix,
.dnet-autocomplete-list-item-sufix,
.dnet-autocomplete-list-header-sufix {
    min-width: var(--dnet-autocomplete-list-prefix-suffix-min-width);
    display: flex;
    justify-content: center;
    align-items: center;

    .dnet-checkbox-layout {
        margin-bottom: 2px;
    }
}

.dnet-autocomplete-list-item-check,
.dnet-autocomplete-list-header-checkall {
    width: var(--dnet-autocomplete-list-check-width);
    display: flex;
    justify-content: center;
    align-items: center;
}

.dnet-autocomplete-list-item-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding-right: 10px;

    &.disabled {
        pointer-events: none;
        opacity: 0.5;
    }
}

.dnet-autocomplete-list-item-headline {
    font-size: var(--dnet-autocomplete-list-headline-font-size);
    color: var(--dnet-autocomplete-list-headline-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &.disabled {
        pointer-events: none;
        opacity: 0.5;
    }
}

.dnet-autocomplete-list-item-supporting-text {
    font-size: var(--dnet-autocomplete-list-supporting-text-font-size);
    color: var(--dnet-autocomplete-list-supporting-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &.disabled {
        pointer-events: none;
        opacity: 0.5;
    }
}

.dnet-autocomplete-list-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

@media only screen and (max-width: 550px) {
    .dnet-autocomplete-list-form {
        display: flex;
    }
}