@import 'vars';
@import 'mixins';

.templates {
    &-overview {
        max-width: 600px;
    }

    &-selected {
        opacity: .75;
        pointer-events: none;
    }
}

.preview-container {
    .desktop-macos-bigsur {
        .rpp-main {
            background: rgba(245, 245, 245);
        }

        .rpp-header {
            margin-bottom: .0625rem !important;
        }
    }
}

.template-form {
    @include fixed($size-header, 0, 0, null);
    @include box-shadow-outer(-2px, 0, 4px, .05);
    border: 0;
    border-radius: 0;
    max-width: 80%;

    &.fullscreen-mode {
        @include fixed($size-header, 0, 0, $size-sidebar);
        max-width: 100%;
    }

    .card-body {
        border: 0;
        border-radius: 0;
        overflow-x: auto;
        overflow-y: scroll;
        position: relative;
    }

    &-inner {
        min-width: 1100px;
        flex-direction: row;
        flex-wrap: nowrap;

        form {
            max-width: 700px;
        }

        .col-auto {
            &:first-child {
                border-right: 1px solid $color-border;
                padding-left: 15px;
                padding-right: 3rem;
            }

            &:last-child {
                padding-left: 3rem;
            }
        }
    }

    .card-header {
        background-color: $color-white;
        border-left: 0;
        border-radius: 0;

        h3 {
            margin: 0;
        }

        .row {
            flex-wrap: nowrap;
        }

        .col {
            overflow: hidden;
        }

        .col-auto {
            padding-right: 9rem !important;
        }
    }

    .preview-container {
        background-color: $color-background;
        border: 2px solid $color-border;
        border-radius: 2px;
        width: 600px;
        text-align: left;
        text-decoration: none;
    }
}