&.mini-vertical {
    width: 180px;
    display: inline-block;

    .color {
        display:inline-block;
        width: 140px;
        height: 160px;
        vertical-align: middle;
    }

    .control {
        height: 160px;
        padding: 0px;
        vertical-align: middle;
        display:inline-block;

        .hue, .opacity {
            margin: 0px;
            padding:0px;
            width: 20px;
            display:inline-block;
            vertical-align: middle;
            height: 100%;
            position: relative;
        }

        .hue > .hue-container {
            border-radius:0px;
            overflow:hidden;
            height: 100%;
            background: linear-gradient(to top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);            
        }
      

        .opacity > .opacity-container {
            border-radius: 0px;
            overflow: hidden;
            height: 100%;            
            width: 20px;
        }
        

        .drag-bar, .drag-bar2 {
            border:0px;
            background-color: transparent;
            height:2px;
            width:100%;
            box-sizing: border-box;
            box-shadow: none;
            transform: none;

            &.last {
                &:before, &:after {
                    top: 2px;
                }
            }

            &.first {
                &:before, &:after {
                    top: -1px;
                }
            }

            &:before {
                content: "";
                position: absolute;
                left: 0px;
                top: 2px;
                width: 0; 
                height: 0;
                transform: translateY(-50%); 
                border-top: 4px solid transparent;
                border-bottom: 4px solid transparent;
                border-left: 4px solid black;
            }

            &:after {
                content: "";
                position: absolute;
                top: 2px;
                right: 0px;
                width: 0; 
                height: 0; 
                transform: translateY(-50%);                
                border-top: 4px solid transparent;
                border-bottom: 4px solid transparent;
                border-right: 4px solid black;
            }            
        }

    }

}