/*
 * This file is used to override the default Shoelace CSS.
*/


/* Tooltips */
sl-tooltip {
    --sl-tooltip-background-color: var(--deep-background-color);
    --sl-tooltip-color: var(--global-font-color);
    --sl-tooltip-padding: 0.25em 0.5em;
    --sl-tooltip-border-radius: 0.25em;
    --sl-tooltip-font-family: var(--global-font-family);
}

sl-tooltip::part(body) {
    border: 1px solid var(--border-color);
}

/* Buttons */
sl-button {
    --sl-input-font-family: var(--global-font-family);
}

sl-textarea {
    --sl-input-font-family: var(--global-font-family);
    --sl-input-font-size-small: var(--font-size-normal);
    --sl-input-font-size-medium: var(--font-size-medium);
    --sl-input-background-color: var(--blue-gray);
    --sl-input-border-width: 1px;
    --sl-input-border-color: var(--border-color);
    --sl-input-border-color-focus: var(--border-color);
    --sl-input-border-color-hover: var(--border-color);
    --sl-input-border-color-active: var(--border-color);
    --sl-input-background-color-hover: var(--blue-gray);
    --sl-input-background-color-focus: var(--blue-gray);
    --sl-input-color: var(--global-font-color);
    --sl-input-color-focus: var(--global-font-color);
    --sl-input-color-hover: var(--global-font-color);
    --sl-focus-ring-width: 0;
    --sl-input-border-radius-large: 0.5rem;
    --sl-input-border-radius-medium: 0.5rem;
    --sl-input-border-radius-small: 0.5rem;
}

sl-textarea::part(form-control-label) {
    margin-bottom: 0.5rem;
}
sl-textarea[disabled]::part(textarea), sl-textarea[readonly]::part(textarea) {
    color: var(--light-global-font-color)
}
sl-textarea::part(base) {
    background: var(--blue-gray);
    box-shadow: var(--soft-continer-outer-shadow);
    border-radius: 1.5rem;
    border: none;
}
sl-textarea::part(textarea) {
    font-size: var(--font-size-normal);
    color: var(--global-font-color);
    border-radius: 1.5rem;
    padding: 0.75rem 1.2rem;
}

sl-details::part(base) {
    font-family: var(--global-font-family), sans-serif;
    background: var(--blue-gray);
    box-shadow: var(--soft-continer-outer-shadow);
    border-radius: 1.5rem;
    border: none;
}

sl-details::part(header) {
    background-color: transparent;
    font-weight: 600;
}
sl-details::part(header):focus-visible {
    outline: none;
}

sl-details::part(summary) {

}

sl-details::part(summary-icon) {

}

sl-details::part(content) {
    padding-top: 0;
}

sl-input {
    --sl-input-font-family: var(--global-font-family);
    --sl-input-font-size-small: var(--font-size-normal);
    --sl-input-font-size-medium: var(--font-size-medium);
    --sl-input-background-color: var(--blue-gray);
    --sl-input-border-width: 1px;
    --sl-input-border-color: var(--border-color);
    --sl-input-border-color-focus: var(--border-color);
    --sl-input-border-color-hover: var(--border-color);
    --sl-input-border-color-active: var(--border-color);
    --sl-input-background-color-hover: var(--blue-gray);
    --sl-input-background-color-focus: var(--blue-gray);
    --sl-input-color: var(--global-font-color);
    --sl-input-color-focus: var(--global-font-color);
    --sl-input-color-hover: var(--global-font-color);
    --sl-focus-ring-width: 0;
    --sl-input-label-font-size-medium: var(--font-size-normal);
    --sl-input-border-radius-large: 0.5rem;
    --sl-input-border-radius-medium: 0.5rem;
    --sl-input-border-radius-small: 0.5rem;
}
sl-input::part(base) {
    border: none;
    background: transparent;
    outline: none;
}
sl-input::part(form-control) {
    background: var(--blue-gray);
    box-shadow: var(--outline-button-shadow);
    border-radius: 1.5rem;
}
sl-input::part(input) {
    background: transparent;
}
sl-input::part(input)::placeholder {
    color: var(--light-blue-gray);
}
sl-input::part(form-control-label) {
    margin-bottom: 0.5rem;
}

sl-input {
    width: 100%;
}
sl-input::part(input),
sl-input::part(suffix),
sl-input::part(prefix) {
    font-size: var(--font-size-normal);
}
/* Shoelace input size corrections - Without these form fields will be misaligned */
sl-input::part(form-control) {
    height: 2.693rem;
}
sl-input::part(base) {
    height: 2.693rem;
    align-items: center;
}
sl-input::part(input) {
    height: 2.693rem;
}

sl-input[readonly],
sl-input[disabled] {
    color: var(--light-global-font-color)
}

sl-input[disabled]::part(base) {
    background-color: var(--blue-gray);
    border: 1px solid var(--border-color);
    opacity: 1;
}
sl-input[disabled]::part(input) {
    color: inherit;
}


sl-checkbox{
    --sl-input-font-family: var(--global-font-family);
    --sl-input-font-size-small: var(--font-size-normal);
    --sl-input-font-size-medium: var(--font-size-medium);
    --sl-input-color: var(--global-font-color);
}

sl-checkbox::part(control--checked) {
    border-color: var(--primary-green);
    background-color: var(--primary-green);
}


/*Parts sl-radio-button
Name 	Description
base 	The component’s base wrapper.
button 	The internal <button> element.
button--checked 	The internal button element when the radio button is checked.
prefix 	The container that wraps the prefix.
label 	The container that wraps the radio button’s label.
suffix 	The container that wraps the suffix.*/
sl-radio-button::part(button) {
    font-family: var(--global-font-family), sans-serif;
    background-color: var(--blue-gray);
    color: var(--global-font-color);
    border: none;
    border-left: 1px solid var(--border-color);
}
sl-radio-button:hover::part(base){
    border-color: var(--border-color);
}
sl-radio-button:hover::part(button) {
    border-color: var(--border-color);
    color: var(--darker-primary-green)
}
sl-radio-button::part(button--checked) {
    color: var(--colored-button-font-color) !important;
    background-color: var(--primary-green);
}

sl-radio-group::part(form-control) {
    border-radius: 1.5rem;
    background: var(--blue-gray);
    box-shadow: var(--soft-continer-outer-shadow);
}

/* Option to separate the radio buttons */
sl-radio-group[separated-buttons]::part(button-group__base) {
    row-gap: 0.5rem;
    column-gap: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0.75rem 2rem;
}
.first-radio-button::part(button){
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
}
.last-radio-button::part(button){
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
}
sl-radio-group[separated-buttons] sl-radio-button::part(button) {
    border-radius: 1rem;
    color: var(--global-font-color);
    width: 100%;
    justify-content: flex-start;
    transition: background-color 0.25s ease-in-out, border-color 0.5s ease-in-out;
    border-left: none;
}

sl-radio-group[separated-buttons] sl-radio-button::part(button--checked) {
    box-shadow: var(--primary-button-shadow);
}

/* Style for the dropdown container */
.sl-autocomplete-dropdown {
    position: absolute;
    background: var(--deep-background-color);
    border: 1px solid var(--border-color);
    list-style: none;
    padding: 5px;
    margin: 0;
    display: none; /* Initially hidden */
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.sl-autocomplete-dropdown .highlight {
    background-color: var(--hover-gray);
    font-weight: bold;
}

/* Style for dropdown items */
.sl-autocomplete-dropdown .item {
    padding: 5px;
    cursor: pointer;
}

/* Style for the selected item */
.sl-autocomplete-dropdown .item.selected {
    background: var(--hover-gray); /* Highlight color */
}

/* Hover effect */
.sl-autocomplete-dropdown .item:hover {
    background: var(--hover-gray);
}

sl-select::part(listbox) {
    scrollbar-width: thin;
    scroll-behavior: smooth;
}
sl-select {
    width: 100%;
}
sl-select::part(listbox) {
    margin-top: 0.4rem;
    background-color: var(--blue-gray-alternate);
    box-shadow: var(--soft-continer-outer-shadow);
    font-family: inherit;
    color: inherit;
    font-size: var(--font-size-normal);
    border-radius: 1.25rem;
    padding: 0;
    border: none;
}
sl-select::part(display-input) {
    color: inherit;
}
sl-select::part(display-input)::placeholder {
    color: var(--light-blue-gray);
}
sl-option::part(base) {
    padding: 0.5rem 0.5rem;
    background: transparent;
    color: var(--global-font-color);
    font-family: inherit;
    font-size: var(--font-size-normal);
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
sl-option::part(base):hover {
    background-color: var(--glass-background-hover);
    color: var(--darker-primary-green);
}

sl-menu {
    background: var(--blue-gray-alternate);
    box-shadow: var(--soft-continer-outer-shadow);
    margin-top: 0.5rem;
    border-radius: 1rem;
    border: none;
}
sl-menu-item:hover::part(base),
sl-menu-item:focus-visible::part(base) {
    background-color: var(--hover-gray);
}
sl-menu-item::part(base) {
    padding: 0.5rem 0.5rem;
    color: var(--global-font-color);
}
    sl-menu-item::part(label) {
        font-family: 'Montserrat', sans-serif;
        font-size: var(--font-size-normal);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    sl-menu-item a {
        color: inherit;
        font-family: 'Montserrat', sans-serif;
        font-size: var(--font-size-normal);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .small-menu-icon {
        display: flex;
        font-size: 1.35rem;
    }

sl-tab-group {
    --track-color: var(--light-global-font-color);
    --indicator-color: var(--darker-primary-green)
}
sl-tab-group::part(body) {
    scrollbar-width: thin;
}
sl-tab {
    --sl-color-neutral-600: var(--global-font-color);
    --sl-color-primary-600: var(--darker-primary-green);
    --sl-font-sans: Montserrat, sans-serif;
}

sl-icon-button::part(base){
    transition: scale 0.1s;
    color: var(--global-font-color);
    padding: 0.25rem;
    font-size: var(--font-size-large);
}

sl-icon-button::part(base):hover{
    color: var(--primary-green);
    scale: 1.1;
}

sl-divider {
    --color: var(--border-color);
}

sl-copy-button::part(button) {
    padding: 0;
}

sl-dialog::part(panel) {
    background: var(--light-glass-background);
    box-shadow: var(--input-glass-shadow);
    border: var(--glass-container-border);
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
    border-radius: 1rem;
}

sl-dialog::part(overlay) {
    background-color: var(--backdrop-color);
}

sl-breadcrumb-item::part(base) {
    color: var(--global-font-color);
}

sl-skeleton::part(indicator) {
    height: 1.1rem;
    background-color: var(--hover-gray);
}

sl-dropdown:not([open]) sl-menu {
    display: none;
}