/* =====================================
   SLIDEOVER COMPONENT STYLES
   ===================================== */

@layer components{
    /* ============= Sidebar Search ============= */
    /* Sidebar Search Normal State */
    [data-role="sidebar-search"].normal{
        background-color: var(--surface-primary);
        border-left: 1px solid var(--border);
    }

    /* ============= Search Presets ============= */
    /* Search Presets Container */
    [data-role="search-presets"]{
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
    }

    /* ============= Preset Header ============= */
    /* Preset Header Container */
    .preset-header{
        border-bottom: 1px solid var(--border);
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Preset Header Title */
    .preset-header h2{
        font-weight: 600;
        font-size: var(--font-size-lg);
        color: var(--foreground-primary);
    }

    /* Preset Header Icon */
    .preset-header h2 .fa{
        color: var(--foreground-second);
    }

    /* ============= Preset Controls ============= */
    /* Preset Controls Container */
    .preset-controls{
        padding-left: 6px;
        padding-right: 6px;
    }

    /* Preset Controls Input Info */
    .preset-controls .input-info{
        border-left: 1px solid var(--border);
        right: 6px;
    }

    /* Preset Controls Input Info Link */
    .preset-controls .input-info a{
        color: var(--foreground-second);
        border-top-right-radius: var(--input-radius);
        border-bottom-right-radius: var(--input-radius);
    }

    /* Preset Controls Input Info Link Hover */
    .preset-controls .input-info a:hover{
        color: var(--foreground-primary);
        background-color: transparent;
        /* background-color: var(--surface-second); */
    }

    /* Preset Controls No Presets Message */
    .preset-controls .noPresets{
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--foreground-second);
    }

    /* ============= My Presets Section ============= */
    /* My Presets Parent Container */
    .my-presets-parent{
        padding-bottom: 8px;
    }

    /* My Presets Section Title */
    .my-presets-parent h3{
        font-size: var(--font-size-base);
        font-weight: 500;
        color: var(--foreground-second);
        border-top: 1px solid var(--border);
        padding-left: 16px;
        padding-right: 16px;
    }

    /* My Presets Icon */
    .my-presets-parent > a > .fa{
        color: var(--foreground-second);
    }

    /* ============= Preset Items ============= */
    /* Preset Item Container */
    .preset-parent{
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: 0px;
        padding: 8px 8px;
        border-radius: var(--widget-radius);
        background: transparent;
        margin: 0;
    }

    /* Preset Item Hover State */
    .preset-parent:hover{
        background: var(--surface-second);
    }

    /* Preset Item Link */
    .preset-parent > a{
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--foreground-primary);
        text-decoration: none;
        flex: 1;
    }

    .trigger-btns{
        background-color: var(--surface-second);
        border-top: 1px solid var(--border);
    }
}