:root{
    --dropdown-item-icon-size: 16px;
    --dropdown-item-height: 26px;
    --dropdown-item-line-height: 22px;

    --dropdown-item-icon-size-small: 14px;
    --dropdown-item-height-small: 24px;
    --dropdown-item-line-height-small: 18px;
    
    --dropdown-item-label-color: #222;
    
    --light-back: #CCC;

    --dropdown-label-img: 18px;
    --dropdown-label-radius: 15px;
    --dropdown-label-height: 28px;
    --dropdown-label-image-div-line: #444;

    --dropdown-label-border: rgba(128, 128, 128, 0.3);

    --dropdown-label-text: #444;
    
    --dropdown-label-bg: rgba(255, 255, 255, 0.8);

    --dropdown-label-min-width: 100px;

    --dropdown-label-icon-color: var(--icon-colour);
}

[data-theme="dark"] {
    --dropdown-item-label-color: #DDD;
    --light-back: #333;

    --dropdown-label-bg: rgba(0, 0, 0, 0.8);
    --pane-label-image-div-line: #BBB;
}

.dropdown
{
    display: none;
    opacity: 0;
    background: var(--input-bg);
    box-shadow: var(--input-active-bs);
    position: fixed;
    color: var(--input-text);

    width: fit-content;
    height: fit-content;
    /* max-height: 200px; */
    overflow-y: auto;
    padding: 10px;

    border-radius: 10px;

    transform: translateY(-10px);

    transition: color 0.4s, background-color 0.4s, box-shadow 0.4s, opacity 0.4s, transform 0.4s ease-out;

    max-width: 360px;
}

.dropdown.min-width
{
    min-width: 300px;
}

.dropdown.small
{
    padding: 5px;
}

.dropdown.light-back
{
    background: var(--light-back);
}

.dropdown.showing
{
    display: block;
    opacity: 0;
}

.dropdown.no-padding
{
    padding: 0px;
}
/*
.dropdown.min-padding
{
    padding: 6px 0px 0px 0px
}
*/

.dropdown.open
{
    display: block;
    opacity: 1;
    z-index: 1000;
    transform: translateY(0);
}

.dropdown.hiding
{
    display: block;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-10px);
}

.dropdown-control
{
    transition: color 0.4s, background-color 0.4s, box-shadow 0.4s;
}

.dropdown-control.open
{
    /* background-color: var(--button-bg-active); */
    box-shadow: var(--input-active-bs);
}

.dropdown-control.hiding
{
    box-shadow: none;
    /* background-color: unset; */
}

.dropdown ul
{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.dropdown > ul > li
{
    display: flex;
    flex-direction: row;
    align-items: center;

    padding: 2px 4px;
    cursor: pointer;
    border-radius: 2px;
    min-width: 120px;

    height: var(--dropdown-item-height);
    line-height: var(--dropdown-item-line-height);
    /* width: fit-content; */
}

.dropdown.small > ul > li
{
    height: var(--dropdown-item-height-small);
    line-height: var(--dropdown-item-line-height-small);
}

.dropdown li:nth-child(even)
{
    background-color: var(--stripe-shade);
}

.dropdown li:hover
{
    background-color: var(--list-hover);
}

.dropdown li .label{
    color: var(--dropdown-item-label-color);

    user-select: none;
}

.dropdown li .icon
{
    width: var(--dropdown-item-icon-size);
    height: var(--dropdown-item-icon-size);
 
    color: var(--input-icon-color);
    transition: border-right 0.4s, color 0.4s, background-color 0.4s;  
}

.dropdown.lined li .icon
{
    border-right: 2px solid var(--input-image-div-line);
    padding-right: 8px;
    margin-right: 3px;
}

.dropdown.small li .icon
{
    width: var(--dropdown-item-icon-size-small);
    height: var(--dropdown-item-icon-size-small);
}

.dropdown.lined.small li .icon
{
    padding-right: 4px;
    margin-right: 5px;
}

.dropdown li:has(.label) .icon
{
    margin-right: 5px;
}

.dropdown li > svg
{
    width: var(--dropdown-item-icon-size);
    height: var(--dropdown-item-icon-size);

    line-height: var(--dropdown-item-line-height);
}

.dropdown.small li > svg
{
    width: var(--dropdown-item-icon-size-small);
    height: var(--dropdown-item-icon-size-small);

    line-height: var(--dropdown-item-line-height-small);
}


/*Dropdown Label*/

.dropdown > .dropdown-label
{   
    display: flex;
    flex-direction: row;

    width: fit-content;
    align-items: center;

    position: relative;
    min-width: var(--dropdown-label-min-width);

    padding: 7px;

    /* height: var(--dropdown-label-height); */
    /* line-height: var(--input-line-height); */
    
    border-radius: var(--dropdown-label-radius) 0px var(--dropdown-label-radius) 0px;

    /* border-radius: 8px 0px 8px 0px; */

    background-color: var(--dropdown-label-bg);

    /* margin-right: 8px; */
    transition: color 0.4s, background-color 0.4s, border 0.4s;
    user-select: none;  

    margin-bottom: 8px;
    margin-left: 1px;
    margin-top: 1px;
    
    border-right: 1px solid var(--dropdown-label-border);
    border-bottom: 1px solid var(--dropdown-label-border);
    border-top: none;
    border-left: none;
}

.dropdown > .dropdown-label.right
{
    align-self:end;
    border-radius: 0px var(--dropdown-label-radius) 0px var(--dropdown-label-radius);

    margin-left: 0px;
    margin-right: 1px;

    border-right: none;
    border-bottom: 1px solid var(--dropdown-label-border);
    border-top: none;
    border-left: 1px solid var(--dropdown-label-border);
}

.dropdown > .dropdown-label > .dropdown-label-icon
{
    width: var(--dropdown-label-img);
    height: var(--dropdown-label-img);
    /* line-height: var(--dropdown-label-height); */

    padding-left: 10px;
    padding-right: 8px;
    border-right: 2px solid var(--dropdown-label-image-div-line);
    margin-right: 5px;

    color: var(--dropdown-label-icon-color);
    transition: border-right 0.4s, color 0.4s, background-color 0.4s;  
}

.dropdown-label-icon > svg
{
    width: var(--dropdown-label-img);
    height: var(--dropdown-label-img);
}

.dropdown > .dropdown-label > .label-text
{
    color: var(--input-label-text);

    transition: color 0.4s, background-color 0.4s;
    /* line-height: var(--input-line-height); */

    
    padding-right: 20px;

    width: fit-content;
}

.dropdown > .dropdown-closer
{
  align-content: center;
  height: var(--pane-label-img);
  float: right;
  margin-right: 5px;
  margin-top: 5px;
}

.dropdown > .dropdown-closer > .dropdown-closer-icon
{
    width: var(--pane-label-img);
    height: var(--pane-label-img);

    margin-right: 5px;

    color: var(--tab-label-control-color);
    transition: border-right 0.4s, color 0.4s, background-color 0.4s;  
    cursor: pointer;

    border-radius: 50%;
}

.dropdown > .dropdown-closer > .dropdown-closer-icon:hover
{
  background-color: var(--tab-label-control-hover);
}

.dropdown-closer-icon > svg
{
    width: var(--pane-label-img);
    height: var(--pane-label-img);
}