TmMolStar/src/mol-plugin/skin/base/components/transformer.scss

.msp-transformer {    
    
    .msp-entity-badge {
        position: absolute;
        top: 0;
        right: 0;
        height: $row-height;
        line-height: $row-height;
        width: $row-height;
    }
}

.msp-layout-right {
    background: $control-background;
}

.msp-transformer-wrapper {
    position: relative;    
}

.msp-transformer-wrapper {   
    
    .msp-entity-badge {
        left: 0;
        top: 0;
    }
    
    &:first-child {
        .msp-panel-description-content {
            top: $row-height + 1;
        }
    }
    
    &:not(:first-child) {
        .msp-panel-description-content {            
            bottom: $row-height + 1;
        }
    }
}

.msp-transform-wrapper {
    margin-bottom: $control-spacing;
}

.msp-transform-header {
    position: relative;
    // border-top: 1px solid $entity-color-Behaviour; // TODO: separate color

    > button {
        text-align: left;
        padding-left: $row-height;
        background: $control-background; // color-lower-contrast($default-background, 4%);
        font-weight: bold;
    }

    > button:hover {
        color: color-lower-contrast($font-color, 15%);
    }
}

.msp-transform-default-params {
    position: absolute;
    right: 0;
    top: 0;
}

.msp-transform-default-params:hover {
    background: color-lower-contrast($default-background, 20%);
}

.msp-transform-apply-wrap {
    position: relative;
    margin-top: 1px;
    width: 100%;
}

.msp-transform-refresh {
    width: $control-label-width + $control-spacing;
    background: $default-background;
    text-align: right;
}

.msp-transform-apply {
    display: block;
    position: absolute;
    left: $control-label-width + $control-spacing;
    right: 0;
    top: 0;
}

.msp-data-beh {
    margin: $control-spacing 0 !important;
}