/*
 * SE Ranking inside the platform shell's frame (`data-platform-shell` on <html>, set by
 * platformShell.js): the left menu takes the colours, type and corners of the shell's sidebar
 * (Figma "Shell - Navigation", node 2124:3460) and keeps its own layout. Outside the shell
 * nothing here applies.
 */

/* stylelint-disable custom-property-pattern -- the tokens keep Figma's names (--x-spacing-1_5) */

/* The shell's tokens, valued and named as in Figma, with an x- prefix so they never meet
   SE Ranking's own variables. */
html[data-platform-shell] {
    --x-sidebar: #fafafa;
    --x-sidebar-foreground: #0a0a0a;
    --x-sidebar-accent: #f4f4f5;
    --x-sidebar-accent-foreground: #171717;
    --x-sidebar-border: #e5e5e5;
    --x-muted-foreground: #737373;
    --x-background: #fff;
    --x-foreground: #0a0a0a;
    --x-border: #e5e5e5;
    --x-accent: #f5f5f5;
    --x-accent-foreground: #171717;
    --x-ring: #a1a1a1;
    --x-font-sans: 'Geist', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', sans-serif;
    --x-text-xs: 12px;
    --x-text-xs--line-height: 16px;
    --x-text-sm: 14px;
    --x-text-sm--line-height: 20px;
    --x-radius-sm: 6px;
    --x-radius-md: 8px;
    --x-spacing-1: 4px;
    --x-spacing-1_5: 6px;
    --x-spacing-2: 8px;
    --x-spacing-3: 12px;
    --x-size-4: 16px;
    --x-h-8: 32px;
    --x-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --x-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);

    /* Not in Figma. The menu's icons are white images, so a filter paints them in
       --x-muted-foreground (#737373): black first, then inverted by 45%. */
    --x-icon-filter: brightness(0) invert(45%);
}

/* Surfaces: the menu, and the popovers of its collapsed items. */
html[data-platform-shell] :is(.left-menu__groups, .left-menu__group-menu-content) {
    background-color: var(--x-sidebar);
}
html[data-platform-shell] .left-menu__groups {
    border-right-color: var(--x-sidebar-border);
}
html[data-platform-shell] .left-menu__group-menu-content {
    box-shadow: inset -1px 0 0 var(--x-sidebar-border);
}
html[data-platform-shell] .left-menu_expanded:not(.left-menu_pinned, .left-menu_old) .left-menu__group-menu-content {
    box-shadow: inset -1px 0 0 var(--x-sidebar-border), var(--x-shadow-sm);
}
html[data-platform-shell] .el-popover:has(.section-dropdown__popover, .section-item__toggler_popover) {
    background-color: var(--x-sidebar) !important;
    border: 1px solid var(--x-sidebar-border) !important;
    box-shadow: var(--x-shadow-sm) !important;
}
html[data-platform-shell] .app-template__content {
    background: var(--x-sidebar);
}

/* Type: the shell's font throughout the menu, except in its icon fonts. */
html[data-platform-shell] :is(.left-menu, .el-popover:has(.section-dropdown__popover, .section-item__toggler_popover)) {
    font-family: var(--x-font-sans);
}
html[data-platform-shell] :is(.left-menu, .el-popover:has(.section-dropdown__popover, .section-item__toggler_popover)) :not(.material-icons, .material-icons-outlined) {
    font-family: inherit;
}

/* Menu buttons, as SidebarMenuButton: h-8, text-sm, medium when active. */
html[data-platform-shell] .left-menu-item {
    color: var(--x-sidebar-foreground);
}
html[data-platform-shell] .left-menu-item:not(.left-menu-item_old) {
    padding: var(--x-spacing-1_5) var(--x-spacing-2);
    font-size: var(--x-text-sm);
    line-height: var(--x-text-sm--line-height);
}
html[data-platform-shell] :is(.left-menu-item:hover, .left-menu-item_hover, .left-menu-item_active) {
    color: var(--x-sidebar-accent-foreground);
}
html[data-platform-shell] .left-menu-item_active {
    font-weight: 500;
}
html[data-platform-shell] .left-menu-item.left-menu-item_old.left-menu-item_disabled {
    color: var(--x-sidebar-foreground) !important;
}
html[data-platform-shell] .left-menu-button:not(.left-menu-button_old, .left-menu-button_collapsed),
html[data-platform-shell] .left-menu-group-wrap {
    border-radius: var(--x-radius-md);
}
html[data-platform-shell] :is(.left-menu-button:hover, .left-menu-button_hover, .left-menu-group-wrap:hover, .left-menu-group-wrap_hover),
html[data-platform-shell] .left-menu-button_old.left-menu-button_opened,
html[data-platform-shell] .section-dropdown-item_old.section-dropdown-item_collapsed:is(:hover, .section-dropdown-item_hover, :active, .section-dropdown-item_active) {
    background-color: var(--x-sidebar-accent);
}
html[data-platform-shell] :is(.left-menu-button_active, .left-menu-group-wrap_active):not(.left-menu-button_disabled) {
    background-color: var(--x-sidebar-accent) !important;
}

/* Groups: the column of icons on the left. */
html[data-platform-shell] .left-menu-group__title {
    color: var(--x-sidebar-foreground);
}
html[data-platform-shell] .left-menu-group_active .left-menu-group__title {
    color: var(--x-sidebar-accent-foreground);
}
html[data-platform-shell] .left-menu-group-wrap_hover .left-menu-group-wrap__arrow {
    background-color: var(--x-sidebar-accent);
}
html[data-platform-shell] .left-menu-group-user__settings-icon {
    background-color: var(--x-sidebar);
}
html[data-platform-shell] :is(.left-menu-group-user:hover, .left-menu-group-user_hover, .left-menu-group-user:active, .left-menu-group-user_active) .left-menu-group-user__settings-icon {
    background-color: var(--x-sidebar-accent);
}

/* Titles and the account block. */
html[data-platform-shell] .left-menu__title {
    color: var(--x-sidebar-foreground);
}
html[data-platform-shell] .menu-section-title {
    color: var(--x-muted-foreground);
}
html[data-platform-shell] .account-data {
    border-color: var(--x-sidebar-border);
}
html[data-platform-shell] .account-data__email {
    color: var(--x-muted-foreground);
}

/* Dropdown sections and their items. */
html[data-platform-shell] .section-dropdown-item__text {
    color: var(--x-sidebar-foreground);
}
html[data-platform-shell] .section-dropdown-item:is(:hover, .section-dropdown-item_hover, :active, .section-dropdown-item_active):not(.section-dropdown-item_disabled) .section-dropdown-item__text {
    color: var(--x-sidebar-accent-foreground);
}
html[data-platform-shell] .section-dropdown-item_disabled .section-dropdown-item__text {
    color: var(--x-muted-foreground);
}
html[data-platform-shell] .section-dropdown-item .section-dropdown-item__bullet::before {
    border-color: var(--x-muted-foreground);
}
html[data-platform-shell] .section-dropdown-item .section-dropdown-item__bullet:not(.section-dropdown-item__bullet_empty)::before {
    background-color: var(--x-muted-foreground);
}
html[data-platform-shell] .section-dropdown-item:is(:active, .section-dropdown-item_active):not(.section-dropdown-item_disabled) .section-dropdown-item__bullet::before {
    border-color: var(--x-sidebar-accent-foreground);
}
html[data-platform-shell] .section-dropdown-item:is(:active, .section-dropdown-item_active):not(.section-dropdown-item_disabled) .section-dropdown-item__bullet:not(.section-dropdown-item__bullet_empty)::before {
    background-color: var(--x-sidebar-accent-foreground);
}
html[data-platform-shell] .section-dropdown .section-dropdown__arrow:hover::before {
    background-color: var(--x-sidebar-border);
}
html[data-platform-shell] .section-dropdown__arrow .se-material-icon-2__body {
    /* Above the hover square, which is positioned and would cover it. */
    position: relative;
    z-index: 1;
}
html[data-platform-shell] :is(.section-dropdown__submenu-section, .left-menu_old .left-menu__section, .left-menu_old .left-menu__header) {
    border-bottom-color: var(--x-sidebar-border);
}

/* Icons, in --x-muted-foreground. */
html[data-platform-shell] :is(
    .left-menu-item-icon,
    .left-menu-group__icon,
    .section-dropdown-item__icon,
    .left-menu-group-user__settings-icon,
    .left-menu-external-link-icon,
    .left-menu-new-tab-link-icon,
    .logout-button
) .se-icon-2__body {
    filter: var(--x-icon-filter);
}
html[data-platform-shell] :is(.left-menu-item-icon, .left-menu-group__icon, .section-dropdown-item__icon) {
    opacity: 1;
}
html[data-platform-shell] .left-menu .help-link__link {
    color: var(--x-muted-foreground);
}
html[data-platform-shell] .left-menu .help-link__link:hover {
    color: var(--x-sidebar-accent-foreground);
}
html[data-platform-shell] .left-menu .help-link__link::before {
    background-color: var(--x-sidebar-accent);
}

/* The pin button on the menu's edge. */
html[data-platform-shell] .left-menu__pin-button {
    border-color: var(--x-sidebar-border);
    background-color: var(--x-sidebar);
}
html[data-platform-shell] .left-menu__pin-button:hover {
    border-color: var(--x-sidebar-border);
    background-color: var(--x-sidebar-accent);
}
html[data-platform-shell] .left-menu__pin-button .se-material-icon-2__body {
    color: var(--x-muted-foreground) !important;
}

/* The project picker's list (project-box) and a hovered project's sections menu
   (project-menu-sections), as the shell's entity picker: a popover with a command list. */
html[data-platform-shell] .left-menu-project-select__content {
    box-shadow: none;
}
html[data-platform-shell] .project-box {
    border: 1px solid var(--x-border);
    border-top: none;
    border-radius: 0 0 var(--x-radius-md) var(--x-radius-md);
    background-color: var(--x-background);
    box-shadow: var(--x-shadow-md);
}
html[data-platform-shell] .left-menu-project-select .projects-list-link-list {
    padding: var(--x-spacing-1);
}
html[data-platform-shell] .left-menu-project-select .link-list__item {
    color: var(--x-foreground);
    font-size: var(--x-text-sm);
    line-height: var(--x-text-sm--line-height);
}
html[data-platform-shell] .left-menu-project-select .link-list__item :is(.text, .link-list__item-link) {
    padding: var(--x-spacing-1_5) var(--x-spacing-2);
    border-radius: var(--x-radius-sm);
    color: var(--x-foreground);
    line-height: var(--x-text-sm--line-height);
}
html[data-platform-shell] .left-menu-project-select .link-list__item.in-group > .text {
    padding-left: 20px;
    border-left-color: var(--x-border);
    border-radius: 0 var(--x-radius-sm) var(--x-radius-sm) 0;
}
html[data-platform-shell] .left-menu-project-select .link-list__item_hovered {
    color: var(--x-accent-foreground);
}
html[data-platform-shell] .left-menu-project-select .link-list__item_hovered > :is(.text, .link-list__item-link) {
    background-color: var(--x-accent);
    color: var(--x-accent-foreground);
}
html[data-platform-shell] .left-menu-project-select .projects-list-link-list__main-item_active {
    background-color: transparent;
}
html[data-platform-shell] .left-menu-project-select .projects-list-link-list__main-item_active > .text {
    background-color: var(--x-accent);
    font-weight: 500;
}
html[data-platform-shell] .left-menu-project-select :is(.projects-list-link-list__main-item_user, .projects-list-link-list__main-item_group) > .text {
    color: var(--x-muted-foreground);
    font-size: var(--x-text-xs);
    font-weight: 500;
    line-height: var(--x-text-xs--line-height);
}
html[data-platform-shell] .left-menu-project-select .text__icon .se-material-icon-2__body {
    color: var(--x-muted-foreground) !important;
}
html[data-platform-shell] .left-menu-project-select :is(.projects-list-link-list__item-arrow, .link-list__item-link-arrow) {
    color: var(--x-muted-foreground);
}
html[data-platform-shell] .left-menu-project-select .link-list__item:is(:hover, .link-list__item_hovered) :is(.projects-list-link-list__item-arrow, .link-list__item-link-arrow) {
    color: var(--x-accent-foreground);
}
html[data-platform-shell] .left-menu-project-select .create-project-btn {
    display: block;
    padding: var(--x-spacing-1);
    border-top: 1px solid var(--x-border);
}
html[data-platform-shell] .left-menu-project-select .create-project-btn__wrap {
    -moz-column-gap: var(--x-spacing-1_5);
         column-gap: var(--x-spacing-1_5);
    padding: var(--x-spacing-1_5) var(--x-spacing-3);
    border-top: none;
    border-radius: var(--x-radius-md);
    color: var(--x-foreground);
}
html[data-platform-shell] .left-menu-project-select .create-project-btn__wrap:hover {
    background-color: var(--x-accent);
    color: var(--x-accent-foreground);
}
html[data-platform-shell] .left-menu-project-select .create-project-btn__text {
    font-weight: 500;
}
html[data-platform-shell] .left-menu-project-select .create-project-btn__icon .se-material-icon-2__body {
    color: inherit !important;
    font-size: var(--x-size-4) !important;
}
html[data-platform-shell] .project-menu-sections__inner,
html[data-platform-shell] .left-menu-project-select .link-list__item-sub-container ol {
    padding: var(--x-spacing-1);
    border: 1px solid var(--x-border);
    border-radius: var(--x-radius-md);
    background-color: var(--x-background);
    box-shadow: var(--x-shadow-md);
}
html[data-platform-shell] .project-menu-sections__inner > .link-list__item:last-child,
html[data-platform-shell] .left-menu-project-select .link-list__item.separate > a {
    border-top-color: var(--x-border);
}
html[data-platform-shell] .project-menu-sections .link-list__item-icon .se-icon-2__body {
    filter: var(--x-icon-filter);
}

/* The project picker's button, as the shell's combobox trigger (an outline button), and the
   search field that replaces it while the list is open. */
html[data-platform-shell] .left-menu-project-select:not(.left-menu-project-select_old) .left-menu-project-select__toggler {
    height: var(--x-h-8);
}
html[data-platform-shell] .left-menu-project-select__toggler-button {
    border: 1px solid var(--x-border);
    border-radius: var(--x-radius-md);
    background-color: var(--x-background);
    box-shadow: none;
    color: var(--x-foreground);
}
html[data-platform-shell] .left-menu-project-select__toggler-button:is(:hover, :active, .se-button-2_active) {
    background-color: var(--x-accent);
    color: var(--x-accent-foreground);
}
html[data-platform-shell] .left-menu-project-select__toggler-button .se-button-2__wrapper {
    height: 100%;
    padding: 0 var(--x-spacing-3);
    border-radius: var(--x-radius-md);
}
html[data-platform-shell] .left-menu-project-select__toggler-button_expanded .se-button-2__wrapper {
    padding-right: calc(var(--x-spacing-3) + var(--x-size-4) + var(--x-spacing-1_5));
}
html[data-platform-shell] .left-menu-project-select__toggler-button-text {
    color: inherit;
    font-size: var(--x-text-sm);
    line-height: var(--x-text-sm--line-height);
}
html[data-platform-shell] .left-menu-project-select__toggler-button-text_placeholder {
    color: var(--x-muted-foreground);
    font-weight: 400;
}
html[data-platform-shell] .left-menu-project-select__toggler-icon .se-material-icon-2__body {
    color: var(--x-muted-foreground) !important;
}
html[data-platform-shell] .left-menu-project-select_disabled .left-menu-project-select__toggler-button {
    background-color: var(--x-background) !important;
    color: var(--x-foreground) !important;
    opacity: 0.5;
}
html[data-platform-shell] .left-menu-project-select__toggler-input .se-input-2__area {
    min-height: 0;
    border: 1px solid var(--x-border) !important;
    border-radius: var(--x-radius-md);
    background-color: var(--x-background);
    color: var(--x-foreground);
    font-size: var(--x-text-sm);
}
html[data-platform-shell] .left-menu-project-select__toggler-input .se-input-2__area:focus {
    border-color: var(--x-ring) !important;
}
html[data-platform-shell] .left-menu-project-select__toggler-input .se-input-2__area::-moz-placeholder {
    color: var(--x-muted-foreground);
}
html[data-platform-shell] .left-menu-project-select__toggler-input .se-input-2__area::placeholder {
    color: var(--x-muted-foreground);
}
html[data-platform-shell] .left-menu-project-select__search-icon .se-icon-2__body {
    filter: var(--x-icon-filter);
}