@use '../styles/mat-selectors' as ms;

.adf {
    &-info-drawer {
        .adf-metadata-properties-panel {
            display: block;
            margin: 0;
        }

        #{ms.$mat-tab-label-text} {
            min-width: 0;
        }

        & &-layout {
            .adf-info-drawer-icon {
                display: inline-block;
                vertical-align: middle;
                margin-right: 10px;
            }

            &-content {
                padding: 0;

                & > :not(.adf-info-drawer-tabs) {
                    padding: 10px;

                    > * {
                        margin-bottom: 20px;
                        display: block;
                    }
                }

                .adf-info-drawer-tabs {
                    & #{ms.$mat-tab-body-content} > * {
                        margin-bottom: 20px;
                        display: block;
                    }

                    & #{ms.$mat-tab-body-content} > *:last-child {
                        margin-bottom: 0;
                    }

                    #{ms.$mat-tab-label-text} {
                        flex-grow: 1;

                        #{ms.$mat-icon} + span {
                            padding-left: 5px;
                        }
                    }

                    #{ms.$mat-tab-body} {
                        overflow-y: hidden;
                    }

                    #{ms.$mat-tab-body-content} {
                        /* stylelint-disable */
                        overflow: auto;
                        /* stylelint-enable */
                    }
                }
            }
        }
    }
}

/* stylelint-disable-next-line no-descending-specificity */
.adf-info-drawer-tabs {
    #{ms.$mat-tab-label-container} {
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    }

    div[role='tab'].adf-info-drawer-tab {
        color: var(--theme-accent-color);
        background-color: var(--adf-theme-background-card-color);
        border-bottom: unset;
        opacity: 1;

        &#{ms.$mat-tab-label} {
            flex-grow: 1;
        }

        &:has(span) {
            height: 32px;
        }

        &:focus-visible {
            outline: 2px solid var(--theme-blue-button-color);
            border-radius: 4px;
            outline-offset: -2px;
        }

        &--active {
            color: var(--theme-primary-color);
            background-color: var(--adf-theme-background-card-color);
            border-bottom: 1px solid unset;

            &:focus {
                color: var(--adf-theme-foreground-text-color);
                border-bottom: unset;
            }
        }

        &:hover:not([class*='--disabled'], [class*='--active']) {
            color: var(--theme-accent-color);
            background-color: var(--adf-theme-background-card-color);
            border-bottom: unset;
        }

        &--disabled {
            color: var(--adf-info-drawer-tab-disabled-color);
            background-color: var(--adf-info-drawer-tab-disabled-background);
            border-bottom: var(--adf-info-drawer-tab-disabled-bottom-line);
        }
    }
}