/* stylelint-disable no-descending-specificity */
$list-view-item-active-color: var(--blue);
$list-view-hover-gradient: linear-gradient(90deg, var(--midnight-50, #f2f8fc) 0%, #fff 100%);
$list-view-selected-gradient: linear-gradient(90deg, var(--midnight-100, #deedf7) 0%, #fff 100%);

.SuiteListView {
    display: flex;
    flex-direction: column;
    padding: 8px;

    &-main {
        display: flex;
        flex-direction: row;
        overflow: hidden;
        flex: 1;
    }

    &-body {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
    }

    &-filter {
        position: relative;
        display: flex;
        flex: 1;

        &-input {
            height: 32px;
            padding: 4px 12px;

            &.with-icon {
                padding-left: 32px;
            }
            &.with-clear {
                padding-right: 38px;
            }
        }

        &-clear-button,
        &-search-glyph {
            position: absolute;
            top: 0;
            bottom: 0;
            display: flex;
            align-items: center;

            > .GlyphIcon {
                color: var(--glyphs-default);
            }
        }

        &-clear-button {
            right: 13px;
        }

        &-search-glyph {
            left: 12px;
        }

        &-message {
            @include text-body-small;

            margin: -4px 4px 0;
            display: flex;
            align-items: center;
            color: var(--text-secondary);
            gap: 4px;

            &.error {
                color: var(--text-error);

                .GlyphIcon {
                    color: var(--glyphs-error);
                }
            }

            &.warning {
                .GlyphIcon {
                    color: var(--glyphs-warning);
                    height: 18px;
                    align-self: baseline;
                }
            }
        }
    }

    &-header {
        display: flex;
        margin: 4px 0 9px;
        padding: 0 4px;
        flex-wrap: wrap;

        .SegmentedButton {
            margin-left: var(--padding-large);
            display: flex;
            align-items: center;
        }

        &-button {
            cursor: pointer;

            &:first-child {
                border-right: 1px solid var(--dividers-default);
                padding-right: 4px;
                margin-right: 4px;
            }

            &.active > .GlyphIcon {
                color: var(--glyphs-focused);
            }
        }
    }

    &-footer {
        display: flex;
        justify-content: space-between;
        margin: 0 4px 4px;
        padding-top: 12px;
        border-top: 1px solid var(--dividers-default);

        &-button {
            line-height: 18px;

            &:focus {
                box-shadow: none;
            }

            &.btn-outline-primary {
                color: var(--blue);
                border-color: var(--blue);
                background-color: white;

                &:not(:disabled):not(.disabled) {
                    &:hover {
                        color: #004a94;
                    }

                    &:active {
                        color: inherit;
                        background-color: inherit;
                        border-color: inherit;
                    }

                    &:active:focus {
                        box-shadow: none;
                    }
                }
            }
        }

        &-left,
        &-right {
            display: flex;
            gap: 12px;
            align-items: center;
        }
    }

    &-empty-state {
        margin: 15px;
        text-align: center;
        color: var(--text-secondary);
    }

    &-divider {
        margin-bottom: 12px;
        width: 100%;
        padding: 0 4px;
        position: relative;
        z-index: 1;

        &.padding-top {
            margin-top: 12px;
        }

        &-inner {
            height: 1px;
            background-color: var(--dividers-default);
        }
    }

    &-multi-value {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 12px;
        padding-bottom: 20px;

        &.separator {
            border-bottom: 1px solid var(--dividers-default);
        }

        &-tags {
            display: flex;
            flex: 1;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px;

            &-count {
                display: flex;
                align-items: center;
            }
        }

        &-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
        }
    }

    &-group {
        padding: 0 var(--padding-small, 4px);
        position: sticky;
        top: 0;
        background-color: white;

        &.highlight-group {
            background: $list-view-hover-gradient;
            border-top-left-radius: var(--radius-small);
            border-top-right-radius: var(--radius-small);
        }

        &-select {
            opacity: 0;
            transition: opacity ease 0.5s;

            &.visible {
                opacity: 1;
            }
        }
    }

    &-group,
    &-option {
        display: flex;
        align-items: center;

        &-content {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            justify-content: center;
            overflow: hidden;
        }

        &-label,
        &-subtitle {
            flex: 1;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        &-subtitle {
            color: var(--text-secondary);
            @include text-body-small;
        }

        &-icon {
            margin-right: 4px;
            display: flex;
            align-items: center;
            height: 20px;
            align-self: baseline;
        }

        &-indicator {
            margin-left: 4px;

            .GlyphIcon.success {
                color: var(--success);
            }

            .GlyphIcon.warning {
                color: var(--warning);
            }

            .GlyphIcon.error {
                color: var(--danger);
            }

            .GlyphIcon.info {
                color: var(--info);
            }
        }
    }

    &-group-content {
        display: flex;
        flex-direction: row;
    }

    &-option {
        cursor: default;
        padding: var(--padding-medium-small, 8px) var(--padding-small, 4px);

        &-label {
            line-height: 20px;
        }

        &.highlight {
            background: $list-view-hover-gradient;
            border-radius: var(--radius-small);
        }

        &.highlight-group {
            background: $list-view-hover-gradient;

            &:last-child,
            &:has(+ .SuiteListView-group) {
                border-bottom-left-radius: var(--radius-small);
                border-bottom-right-radius: var(--radius-small);
            }
        }

        &.disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        &.selected {
            background: $list-view-selected-gradient !important;
        }

        &.selected &-label {
            font-weight: 500;
        }
    }

    &-section {
        padding-left: 4px;

        &-header {
            display: flex;
            position: sticky;
            top: 0;
            background-color: white;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1px;

            &-buttons {
                opacity: 0;
                transition: opacity ease 0.5s;
            }
        }

        &-list {
            .TagCloud {
                padding: 4px 0;
            }

            .SuiteListView-option:hover:not(.disabled) {
                background: $list-view-hover-gradient;
                border-radius: var(--radius-small);
            }
        }

        &.collapsible {
            cursor: pointer;
        }

        &.separator {
            border-bottom: 1px solid var(--dividers-default);
            padding-bottom: 12px;
            margin-bottom: 12px;
        }

        &:hover {
            .SuiteListView-section-header-buttons {
                opacity: 1;
            }
        }

        &:has(.SuiteListView-section-select-button:hover) {
            background: $list-view-hover-gradient;
            border-radius: var(--radius-small);
        }
    }

    &-group,
    &-section-header,
    &-multi-value-header {
        @include text-body-bold;

        color: var(--gray-600);
        font-feature-settings:
            'clig' off,
            'liga' off;
        height: 28px;
    }

    &-group,
    &-section,
    &-multi-value-header {
        margin-top: 12px;

        &:first-child {
            margin-top: 0;
        }
    }

    &-loading-spinner {
        padding: 50px 0;
    }

    &-list-container {
        position: relative;
        overflow: hidden;
        display: flex;
        flex: 1;
    }

    &-list {
        flex: 1;
        overflow-x: hidden;
        overflow-y: auto;

        @include permanent-scrollbar;

        &-empty {
            margin: 32px 15px;
            text-align: center;
            color: var(--text-secondary);
        }

        &-overlay-end,
        &-overlay-start {
            position: absolute;
            width: 100%;
            height: 6px;
            pointer-events: none;
        }

        &-overlay-end {
            bottom: 0;
            background: linear-gradient(0deg, #fff 0%, rgba(255 255 255 / 0%) 100%);
        }

        &-overlay-start {
            top: 0;
            background: linear-gradient(180deg, #fff 0%, rgba(255 255 255 / 0%) 100%);
        }

        &.hover {
            .SuiteListView-option:hover:not(.disabled) {
                background: $list-view-hover-gradient;
                border-radius: var(--radius-small);
            }
        }

        /* stylelint-disable property-no-vendor-prefix */
        &::-webkit-scrollbar {
            -webkit-appearance: none;
        }
    }

    &-aside {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        border-right: 1px solid var(--dividers-default);
        padding-right: 7px;
        margin: 4px 8px 4px 0;
        width: 153px;

        &-section {
            padding-left: 0;
        }

        &-section:hover {
            background: none;
            transition: none;
            padding-left: 0;
        }

        &-section + &-section {
            padding-top: 12px;
            margin-top: 12px;
            border-top: 1px solid var(--dividers-default);
        }
    }

    &-exclude-mode-toggle {
        width: 100%;
        border-bottom: 1px solid var(--dividers-default);
        padding-bottom: var(--padding-medium-small);
        margin-bottom: var(--padding-medium-small);
    }

    &.static & {
        &-filter {
            &-input {
                &.with-icon {
                    border-radius: var(--radius-x-large, 20px);
                }
            }
        }
        &-option {
            border-radius: 0;
            padding: var(--padding-medium-small, 8px) var(--padding-medium-large, 12px);

            &.highlight {
                background: none;
            }

            &.selected {
                background: none !important;
            }
        }

        &-list {
            .SuiteListView-option:hover {
                background: none;
            }
        }
    }

    &.dividers & {
        &-option {
            border-bottom: 1px solid var(--dividers-light-stroke, #e3e5e8);
        }
    }
}