.debug.offer-ui {
    .docs-note {
        background: $gray-color-dark;
    }
    padding: $unit-10;
    .overlay, .tile {
        border: 0.1px solid red;
        &-frame,
        &-title,
        &-subtitle,
        &-footer,
        &-content-wrapper,
        &-action,
        &-icon,
        &-content {
            position: relative;
            border: 0.1px dashed red;
            color: rgba(255, 255, 255, 0.6);
            &:after {
                position: absolute;
                font-weight: bold;
                display: inline-block;
                top: 0;
                color: red;
            }
            &:hover {
                border: 0.1px dashed cyan;
                &:after {
                    color: cyan;
                }
            }
        }

        &-frame {
            &:after {
                content: '.overlay-frame';
                left: 0;
            }
        }
        &-content {
            &-wrapper {
                &:after {
                    content: '.overlay-content-warpper';
                    left: 0;
                }    
            }
            &:after {
                content: '.overlay-content';
                left: 0;
                top: $font-size;
            }    
        }
        &-icon {
            &:after {
                content: '.overlay-icon';
                left: 0;
                top: $font-size;
            }    
        }
        &-title {
            &:after {
                content: '.overlay-title';
                left: 0;
                top: $font-size;
            }    
        }
        &-subtitle {
            &:after {
                content: '.overlay-subtitle';
                left: 0;
            }    
        }
        &-footer {
            &:after {
                content: '.overlay-footer';
                left: 0;
            }    
        }
        &-action {
            &:after {
                content: '.overlay-action';
                left: 0;
            }    
        }

    }
}