:host {
    display: flex;
    flex-direction: row !important;
    flex-grow: 1;
    overflow: hidden;
    --viewer-width: 380px;
}

.content-container {
    order: 1;

    .viewer {
        height: 100%;
        width: 100%;
    }
}

.right-container {
    display: flex;
    flex-direction: column;
    width: 353px;
    min-width: 353px;
    padding: 24px;
    border-left: none;
    border-right: 1px solid var(--iqser-separator);

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

    .heading-xl {
        margin-bottom: 24px;
    }

    .square-options {
        display: flex;

        > div {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            background-color: var(--iqser-btn-bg);
            color: var(--iqser-grey-7);
            align-items: center;
            justify-content: center;
            text-align: center;
            display: flex;
            cursor: pointer;
            transition: background-color 0.2s;

            &.disabled {
                cursor: not-allowed;
            }

            &:not(.disabled):not(.active):hover {
                background-color: var(--iqser-btn-bg-hover);
            }

            &:not(:last-child) {
                margin-right: 8px;
            }

            &.active {
                background-color: var(--iqser-primary);
                color: var(--iqser-white);
            }

            &.times-new-roman {
                font-family: 'Times New Roman', serif;
            }

            &.helvetica {
                font-family: Helvetica, sans-serif;
            }

            &.courier {
                font-family: Courier, monospace;
            }

            &.DIAGONAL {
                > span {
                    transform: rotate(-45deg);
                }
            }

            &.VERTICAL {
                > span {
                    transform: rotate(-90deg);
                }
            }
        }
    }

    .alignment-buttons {
        width: 99px;
        height: 25px;
        display: flex;
        justify-content: space-between;
        border-radius: 6px;
        border: 1px solid var(--iqser-grey-5);
        margin-right: 10px;

        &.disabled {
            cursor: not-allowed;
        }

        .alignment {
            width: 33px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            mat-icon {
                width: 14px;
            }

            &.active {
                background-color: var(--iqser-primary);
                cursor: default;
            }

            &.horizontal-left,
            &.vertical-top {
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
            }

            &.horizontal-right,
            &.vertical-bottom {
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
            }

            &.disabled {
                pointer-events: none;
            }
        }

        .alignment:not(.active):hover {
            background: var(--iqser-btn-bg-hover);
        }
    }
}
