@use 'common-mixins';

:host {
    display: block;
    position: absolute;
    height: 100%;
    background: white;
    z-index: 1;
    width: 100%;
}

.right-content {
    flex-direction: column;

    @include common-mixins.scroll-bar;
    overflow: hidden;

    &:hover {
        overflow: auto;
    }

    &.has-scrollbar .section {
        padding-right: 13px;
    }
}

.right-title > div {
    display: flex;

    > iqser-circle-button:not(:last-child) {
        margin-right: 2px;
    }
}

.section {
    padding: 24px;
    flex-direction: column;

    > div {
        justify-content: flex-start;
    }

    &:not(:last-child) {
        border-bottom: 1px solid var(--iqser-separator);
    }
}

.attribute {
    > .small-label {
        margin-bottom: 6px;
    }

    &:not(:last-child) {
        margin-bottom: 16px;
    }
}
