@use 'common-mixins';

:host {
    flex-direction: row !important;
}

.content-container,
.right-container {
    flex: 1;
    padding: 30px;
    overflow: auto;
    @include common-mixins.scroll-bar;
}

.right-container {
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 8px;
        margin-bottom: 8px;
        min-height: 34px;
    }

    .template {
        padding: 8px 10px;
        background-color: var(--iqser-btn-bg);
        border-radius: 4px;
        transition: background-color 0.2s;
        position: relative;

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

        .name {
            max-width: calc(100% - 100px);
            @include common-mixins.line-clamp(1);
        }

        .actions {
            right: 16px;
            position: absolute;
            top: 6px;
            display: none;
            align-items: center;

            > *:not(:last-child) {
                margin-right: 12px;
            }
        }

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

            .actions {
                display: flex;
            }
        }
    }

    .template.upload-button {
        display: flex;
        justify-content: center;
        cursor: pointer;
    }
}

.content-container {
    > .heading-xl,
    > .description {
        margin-bottom: 24px;

        > .all-caps-label {
            margin-bottom: 8px;
        }
    }

    .placeholders {
        width: calc(100% + 60px);
        margin-left: -30px;
        display: grid;
        grid-template-columns: 1fr 2fr;

        .all-caps-label {
            border-top: 1px solid var(--iqser-separator);
            border-bottom: 1px solid var(--iqser-separator);
            padding: 8px 32px;

            &:nth-child(2) {
                padding: 8px 16px;
            }
        }

        .placeholder,
        .description {
            padding: 16px 16px;
            border-bottom: 1px solid var(--iqser-separator);
        }

        .placeholder {
            font-weight: 600;
            margin-left: 16px;
        }

        .description {
            margin-right: 16px;
        }
    }
}
