/*******************************************************************************
 * Summary: Web archive dropdown CSS.
 * Created: Dec, 2019
 * Author: Kjartan Hamre <kjartan@netlife.no>
 * Copyright: 2019 (c) Netlife AS, All Rights Reserved
 ******************************************************************************/


.dropdown-container {
    position: relative;
    min-width: 152px;
    flex: 1;
}

.dropdown-icon-button {
    min-width: 0;
    width: 54px;
    flex-basis: 54px;
    flex-grow: 0;
}

.dropdown-icon-button .dropdown-content {
    right: 0;
}

.dropdown-container.width-small {
    width: 152px;
}

.dropdown-container.width-medium {  
    width: 352px;
}

.dropdown-container .dropdown-button {
    align-items: center;
    display: flex;
    font-size: 16px;
    flex-direction: row;
    height: 54px;
    padding: 0 16px;
    position: relative;
}

.dropdown-container .dropdown-button, .dropdown-container .border-label {
    cursor: pointer;
}

.dropdown-container.disabled .secondar-light-child-i-color-hover:hover
            i.material-icons,
        .dropdown-container.disabled .dropdown-button {
    color: rgba(0, 0, 0, 0.3);
    border-color: rgba(0, 0, 0, 0.3);
}

.dropdown-container .dropdown-button i {
    margin-left: auto;
}

.dropdown-container.down i.material-icons.up,
        .dropdown-container i.material-icons.down {
    display: block;
}

.dropdown-container.down i.material-icons.down,
        .dropdown-container i.material-icons.up {
    display: none;
}

.dropdown-content {
    background-color: white;
    border-radius: 4px;
    box-shadow: 0px 3px 6px #0000004D;
    display: none;
    font-weight: bold;
    margin-bottom: 24px;
    min-width: 100%;
    position: absolute;
    white-space: nowrap;
    z-index: 10;
}

.dropdown-content-column {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.dropdown-content-column > a, .dropdown-content-column > div.disabled {
    align-items: center;
    display: flex;
    height: 48px;
    padding: 0 24px;
}

.dropdown-content-column > a > i, .dropdown-content-column > div.disabled > i {
    padding-right: 20px;
}

.dropdown-content-column > div.hr {
    border-bottom: 1px solid rgba(44, 44, 44, 0.4);
    margin: 12px 24px;
}

.dropdown-content-column > div.disabled {
    color: black;
    cursor: auto;
    opacity: 0.4;
}