.#{$package-prefix}-cheatsheet-page {
    h3 {
        margin-top: rem-calc(30);
    }
    
    .colors {        
        p {
            margin: rem-calc(3);
            padding: rem-calc(5);
            width: rem-calc(190);
            float: left;
            border-radius: $global-radius / 2;
            
            &:first-of-type {
                margin: rem-calc(2);
                border: rem-calc(1) solid $black;
            }
        }
    }
    
    .sai-notifier-holder {
        margin-right: rem-calc(30);
    }
    
    .square-list {
        list-style-type: square;
        
        li {
            color: $primary-color;
        }
    }
    
    .sai-copy-content {
        position:relative;
        
        &:before {
            position: absolute;
            z-index: 100;
            content: "Copy";
            display: none;
            width: rem-calc(32);
            height: rem-calc(17);
            right: 0;
            top: 100%;
            
            border: 1px solid $secondary-color;
            border-radius: rem-calc(5);
            
            background-color: $light-gray;
            
            font-family: "Athelas Regular";
            color: $secondary-color;
            text-align: center;
            line-height: rem-calc(15);
            font-size: rem-calc(12);
            cursor: pointer;
        }
        
        &:hover:before{
            display:block;
        }
        
        &.copied:before {
            color: $success-color;
            border-color: $success-color;
        }
    }
}