$sticky-width: 60px;
$sticky-height: 60px;
$sticky-btn-height: 90px;
$sticky-btn-width: (small: 50px, medium: 60px, large: 60px, xlarge: 80px );
$sticky-txt-width: 280px;
//$sticky-btn-margin: $sticky-width - $sticky-btn-width;

.o-sticky {
  position: fixed;

  @include breakpoint(small only) {
    bottom: 0;
    width: 50%;
  }

  @include breakpoint(medium) {
    top: 50%;
    transform: translateY(-50%);
    &:hover, &:focus {
      .o-sticky__txt {
        display: block;
      }
    }
  }


  @include m(right) {
    right: 0;
    text-align: right;

    @include breakpoint(medium) {
      @include e(btn) {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
      }
    }
  }

  @include m(left) {
    left: 0;
    text-align: left;

    @include breakpoint(medium) {
      @include e(btn) {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
      }
    }
  }

  @include m(disabled) {
    &, a {
      cursor: not-allowed;
      pointer-events: none !important;
    }
  }

  @include e(wrap) {
    flex-wrap: nowrap;
    height: 100%;

    @include breakpoint(medium) {
      @include flex-align($x: center, $y: middle);
    }

    @include breakpoint(small only) {
      @include m(right) {
        @include flex-align($x: right, $y: middle);
      }
      @include m(left) {
        @include flex-align($x: left, $y: middle);
      }
    }
  }

  @include e(btn) {
    @include button($background: $ub-white, $background-hover: darken($ub-white, 10%), $color: $ub-txt);
    @include breakpoint(medium) {
      @include button($background: rgba($ub-panel-bg, .7), $background-hover: rgba($ub-white, .7), $color: $ub-txt);
    }
    @include button-expand;
    border: 1px solid darken($ub-panel-bg, 5%);
    height: $sticky-btn-height;
    margin-bottom: 0;
    padding: 0 $ub-xs-padding;

    @include breakpoint(small only) {
      border-radius: 0;
      padding: 0;
    }

    @each $breakpoint, $btn-width in $sticky-btn-width {
      @include breakpoint($breakpoint) {
        min-width: $btn-width;
      }
    }

  }

  @include e(icon) {
    @include flex-grid-column(shrink, 0);
  }

  @include e(txt) {
    @include flex-grid-column(shrink, 0);
    max-width: $sticky-txt-width;
    text-align: left;
    width: auto;

    @include breakpoint(medium) {
      display: none;
      padding-left: $ub-xs-padding;
    }
  }

  @include e(arrow-header) {
    @include txt-element(arrow-header);
  }

  @include e(arrow-subheader) {
    @include txt-element(arrow-subheader);
  }

}