@use '../../../styles/mixins.scss';

.ydb-object-summary {
    position: relative;

    display: flex;
    overflow: hidden;
    flex-grow: 1;
    flex-direction: column;

    width: 100%;
    height: 100%;
    max-height: 100%;

    &__overview-wrapper {
        position: relative;

        display: flex;
        overflow: auto;
        flex-grow: 1;
        flex-direction: column;

        padding: 0 12px 16px;
    }

    &_hidden {
        visibility: hidden;
    }

    &__actions {
        position: absolute;
        top: 19px; // centered relative to the heading
        right: 5px; // centered relative to the collapsed panel

        background-color: var(--g-color-base-background);
    }
    &__button {
        &_hidden {
            display: none;
        }
    }

    &__tree-wrapper {
        display: flex;
        flex-direction: column;
    }

    &__tree {
        overflow-y: scroll;
        flex: 1 1 auto;

        height: 100%;
        padding: 0 12px 12px 16px;
    }

    &__tree-header {
        padding: 23px 12px 17px 20px;
    }

    &__context-menu-item-content-wrapper {
        padding: var(--g-spacing-half) 0;
    }

    &__context-menu-item-content {
        display: flex;
        flex-direction: column;
    }

    &__context-menu-item-title {
        line-height: 20px;
    }

    &__context-menu-item-description {
        line-height: 18px;

        color: var(--g-color-text-secondary);
    }

    &__context-menu-item_with-description {
        align-items: flex-start;

        .g-menu__item-icon-end {
            margin-top: calc(var(--g-spacing-2));
        }
    }

    &__context-menu-item-icon-with-description {
        margin-top: calc(var(--g-spacing-1));
    }

    &__sticky-top {
        z-index: 5;
        @include mixins.sticky-top();
    }

    &__tabs {
        padding: 8px 12px 16px;
    }

    &__tabs-inner {
        --g-tabs-border-width: 0;
        box-shadow: inset 0 -1px 0 0 var(--g-color-line-generic);
    }

    &__tab {
        text-decoration: none;
    }

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

    &__info-controls {
        display: flex;
        gap: 4px;
    }

    &__info-action-button {
        background-color: var(--g-color-base-background);
        &_hidden {
            display: none;
        }
    }

    &__rotated90 {
        transform: rotate(-90deg);
    }
    &__rotated180 {
        transform: rotate(180deg);
    }
    &__rotated270 {
        transform: rotate(90deg);
    }

    &__info-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        padding: 12px 12px 10px;

        border-bottom: 1px solid var(--g-color-line-generic);
    }

    &__info-title {
        display: flex;
        overflow: hidden;
        align-items: center;

        font-weight: 600;
    }

    &__path-name {
        overflow: hidden;

        white-space: nowrap;
        text-overflow: ellipsis;
    }

    &__entity-type {
        display: inline-block;

        margin-right: 5px;
        padding: 3px 8px;

        font-weight: 400;
        text-transform: lowercase;

        border-radius: 3px;
        background-color: var(--g-color-base-generic);

        &_error {
            padding: 3px 0;

            background-color: transparent;
        }
    }
    &__overview-title {
        @include mixins.info-viewer-title();
    }
    &__overview-item-content {
        text-align: end;
        white-space: nowrap;
    }
}