@import '~assets/styles/variables.scss';

form {
    overflow: hidden;
}

.settings-grid {
    display: grid;
    grid-gap: 10px;

    @include desktop {
        grid-template-columns: 40% 60%;
    }

    .mat-form-field {
        width: 100%;
    }
}

.grid-form {
    width: 100%;
    display: grid;
    grid-template-columns: auto 50px;

    .grid-start {
        grid-column-start: 1;
        grid-column-end: 1;
        margin: auto 0;
        width: 100%;
    }

    .grid-end {
        grid-column-start: 2;
        grid-column-end: 2;
        margin: auto 0;
    }

    .color-picker-form {
        .mat-form-field-wrapper {
            padding-bottom: 0;
        }
    }

    .mat-form-field-underline {
        display: none;
    }
}

.preview-container {
    border: 1px solid lightgray;
}

.no-markup {
    /* Do not let the a tag ruin the projector */
    color: inherit;
    text-decoration: inherit;
}

.mat-dialog-actions {
    display: block;
}
