.container.row-xGrid-yMiddle
    .row-xGrid.iso-standard
        button.ctrl-standard.typ-subhed.fx-bubbleDown Bubble down
        button.ctrl-standard.typ-subhed.fx-bubbleUp Bubble up
        button.ctrl-standard.typ-subhed.fx-sliderIn Slide In
    .row-xGrid.iso-standard
        button.ctrl-standard.is-reversed.typ-subhed.fx-bubbleDown Bubble down
        button.ctrl-standard.is-reversed.typ-subhed.fx-bubbleUp Bubble up
        button.ctrl-standard.is-reversed.typ-subhed.fx-sliderIn Slide In

/* alternate colors */
$btn1 = #f0b81f
$btn2 = #9fA255
$btn3 = #81AAA4
$base = #231f20

/* corner values for bubble up and down */
$right-val1: 50%
$left-val1: 50%
$right-val2: 75%
$left-val2: 75%

/* remove background that shows on the site site and change a few things*/
body::before
   display: none

.typ-subhed
    font-family: 'Oswald', sans-serif
    font-size: 18px
    line-height: 20px
    letter-spacing: 0

/* lets create a container and put it in the middle */
.container
    height: 100%
    width: 50%
    margin: auto
    
    > *
        width: 100%
    

.ctrl-standard
    &.fx-bubbleDown
        color: $btn1
        border-color: $btn1
        
        &::after
            bottom: auto;
            border-radius: 0 0 $right-val2 $left-val2/0 0 $right-val1 $left-val1
            background: $btn1
            
        &.is-reversed
            &::after
                height: 300%
                
            &:hover
                color: $btn1
                
                &::after
                    height: 0
            
            

    &.fx-bubbleUp
        color: $btn2
        border-color: $btn2
        
        &::after
            top: auto
            border-radius: $right-val1 $left-val1 0 0/$right-val2 $left-al2 0 0
            background: $btn2
            
        &.is-reversed            
            &::after
                height: 300%
                
            &:hover
                color: $btn2
                
                &::after
                    height: 0
        
        
    &.fx-sliderIn
        color: $btn3
        border-color: $btn3
        
        &::after
            background: $btn3
        
        &.is-reversed            
            &::after
                width: 300%
                
            &:hover
                color: $btn3
                
                &::after
                    width: 0
            
[class*="ctrl-"]
  padding: 5ox 10px
  border-radius: 2px
  border: 1px solid $base

[class*="ctrl-"][class*="fx-"]
    &:hover,
    &.active
      color: $base
    
    &.is-reversed
        color: $base

@css {
    [class*="fx-"],
    [class*="fx-"]:hover {
      transition: color 0.5s  ease-in-out;
    }
    [class*="fx-"]:not(.fx-dyna) {
      position: relative;
      z-index: 1;
      transition-delay: 0.2s !important;
      overflow: hidden;
    }
    [class*="fx-"]:not(.fx-dyna)::after,
    [class*="fx-"]:not(.fx-dyna)::before {
      content: "";
      display: block;
      position: absolute;
      z-index: -1;
    }
    [class*="fx-bubble"]::after {
      transition: height 0.5s ease-in-out;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      height: 0;
      width: 100%;
    }
    [class*="fx-bubble"]:hover::after,
    [class*="fx-bubble"].active::after {
      transition: height 0.5s ease-in-out;
      height: 300%;
    }
    [class*="fx-bubble"]:disabled:hover::after {
      height: 0;
    }
    .fx-sliderIn::after {
      transition: width 0.5s ease-in-out;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 0;
    }
    .fx-sliderIn:hover::after,
    .fx-sliderIn.active::after {
      transition: width 0.5s ease-in-out;
      width: 100%;
    }
    :checked + .fx-sliderIn::after,
    .fx-sliderIn.active::after {
      width: 300%;
    }
}