@import './constants.css';

/* ---CARD--- */
.card {
    background-color: var(--secondary_bg_color);
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: auto;
    padding: 0.5em;
}


/* ---LABEL--- */
.label {
    width: fit-content;
    padding: 0.25em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--secondary);
}


/* ---DROPDOWN--- */
.dropdown {
    padding: 0.25em;
    position: relative;
    background-color: var(--secondary);
}

.dropdown-label {
    width: 100%;
    padding: 0 0.25em;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    cursor: pointer;
}

.dropdown-menu {
    flex-direction: column;
    margin: 0.5rem 0;
    padding: 0.5rem 0.25rem;
    list-style: none;
    display: none;
    position: absolute;
    left: 0;
    right: auto;
    border: 1px solid var(--border);
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    text-align: left;
    z-index: 999;
}

.dropdown-item {
    width: max-content;
    min-width: 7rem;
    padding: 0.25rem;
    display: flex;
    align-items: center;
}
.dropdown-item a { color:var(--nav_link) !important; }

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--secondary);
    color: var(--secondary_text) !important;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--secondary);
    color: var(--secondary_text);
}


/* ---ICONS--- */
.icon {
    width: 0.75em;
    height: 0.75em;
    background-repeat: no-repeat;
    margin: 0 0.25em;
    padding-right: 0.25em;
}
.iarrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}
.iuser {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person user-icon" style=""><path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z"></path></svg>');
}


/* ---PROSE EDITOR--- */
.prose-editor { max-width:none !important }


/* ---SEGMENT--- */
.segment {
    padding-inline: 0.5rem;
}

/* ---TICKET-SEARCH--- */
#ticket-search-minified {
    min-width: 300px;
    height: 300px;
    overflow-y: auto;
    display: block;
}

.ticket-search-minified-result {
    min-width: 7rem;
    padding: 0.25rem;
}

.ticket-search-minified-result:hover {
    background: var(--secondary);
    color: var(--secondary_text) !important;
}

.ticket-search-minified-no-result {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* ---MISC--- */
.active {
    background-color: var(--primary);
    color: white !important;
}

.box-color {
    width: 1.05em;
    height: 1.05em;
    margin: 0.25em 0.5em 0.25em 0;
}

.pointer { cursor: pointer }