@use 'common-components';
@use 'common-texts';

:host {
    @extend .stats-subtitle;
    @extend .small-label;

    flex-direction: column;
    align-items: flex-start;

    .attributes,
    div {
        margin-right: 0;
        border-radius: 4px;
        width: 100%;
        justify-content: flex-start;
        padding: 4px 8px;
        margin-left: -8px;

        &.link-property {
            cursor: pointer;
            transition: background-color 0.2s;

            &:hover {
                background-color: var(--iqser-btn-bg);
            }
        }
    }

    .attributes {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .show-attributes,
    .hide-attributes {
        margin-top: 12px;
        cursor: pointer;

        &::before {
            margin-right: 3px;
        }
    }

    .show-attributes::before {
        content: '+';
    }

    .hide-attributes::before {
        content: '-';
    }
}
