@include phoneandtablet {
    .overlay {
        .clk-icon.close {
            top: $mobileOverlayMargin; right: $mobileOverlayMargin;
        }

        > .holder {
            height: 90%; width: 90%;

            > .contents {
                top: $mobileOverlayMargin;
                right: $mobileOverlayMargin;
                bottom: $mobileOverlayMargin;
                left: $mobileOverlayMargin;

                .top-bar {
                    > .title {
                        margin-right: 1.2em;
                    }
                }
            }
        }
    }
}

@include phone {
    .overlay > .holder {
        //@include test(orange); // This works!
        $m: 0;
        @include border-radius($m);
        top: $m;
        right: $m;
        bottom: $m;
        left: $m;
        height: auto; width: auto;
        min-width: 200px; min-height: 200px;
        max-height: 100%; max-width: 100%;
        overflow: auto;
        @include transform(none);

        .editor .form .form-row {
            > .label,
            > .controls {
                //@include test(blue);
                display: block;
                float: none;
                width: 100%;
            }
            > .label {
                &:after {
                    float: none;
                }
            }
        }
        
        .contents {
            .abs.top-bar,
            .abs.editor,
            .abs.message-body,
            .abs.bottom-bar {
                //@include test(orange);
                top: auto; right: auto; bottom: auto; left: auto;
                height: auto; width: auto;
                margin-bottom: $interiorMarginLg * 2;
                position: relative;
            }
        }
    }
    .t-dialog-sm .overlay > .holder {
        //@include test(blue);
        height: auto; max-height: 100%;
    }
}

@include phonePortrait {
    .overlay > .holder {
        .contents .bottom-bar {
            text-align: center;
        }
    }
}