@if mgwt.css pretty {
	@external mgwt-ScrollPanel, mgwt-ScrollPanel-container, mgwt-Scrollbar;
	@external mgwt-Scrollbar-horizontal, mgwt-Scrollbar-vertical, mgwt-Scrollbar-Bar;
}

.mgwt-ScrollPanel {
  overflow: hidden;
  position: relative;
  z-index: 0;
  width: 100%;
}

.mgwt-ScrollPanel-container {
  overflow: visible;
}

@if user.agent safari {
  .mgwt-ScrollPanel-container {
    -webkit-transition-property: literal('-webkit-transform');
    -webkit-transition-timing-function: literal('cubic-bezier(0, 0, 0.25, 1)');
  }
}

@if user.agent gecko1_8 {
  .mgwt-ScrollPanel-container {
    -moz-transition-property: literal('-moz-transform');
    -moz-transition-timing-function: literal('cubic-bezier(0, 0, 0.25, 1)');
    vertical-align: top;
  }
}

.mgwt-Scrollbar {
  position: absolute;
  z-index: 100;
  pointer-events: none;
  overflow: hidden;
}

@if user.agent safari {
  .mgwt-Scrollbar {
    -webkit-transition-duration: 300ms;
    -webkit-transition-delay: 0ms;
    -webkit-transition-property: opacity;
  }
}

@if user.agent gecko1_8 {
  .mgwt-Scrollbar {
    -moz-transition-duration: 300ms;
    -moz-transition-delay: 0ms;
    -moz-transition-property: opacity;
  }
}

/*TODO build this for ff as well, workaround for position bug?*/
.mgwt-Scrollbar-horizontal {
  bottom: 2px;
  left: 2px;
  height: 5px;
}

.mgwt-Scrollbar-vertical {
  top: 2px;
  right: 2px;
  width: 5px;
}


.mgwt-Scrollbar-Bar {
  position: absolute;
  z-index: 100;
  background:rgba(0,0,0,0.5);
  border-radius: 3px;
  pointer-events:none;
}

@if user.agent safari {
  .mgwt-Scrollbar-Bar {
    -webkit-background-clip:padding-box;
    -webkit-box-sizing:border-box;
    -webkit-border-radius:3px;
    -webkit-transition-property:literal('-webkit-transform');
    -webkit-transition-timing-function:cubic-bezier(0.33,0.66,0.66,1);
    -webkit-transform: translate3d('0,0, 0');
    -webkit-transition-duration:0;
  }
}

@if user.agent gecko1_8 {
  .mgwt-Scrollbar-Bar {
    -moz-background-clip:padding-box;
    -moz-box-sizing:border-box;
    -moz-transition-property:literal('-webkit-transform');
    -moz-transition-timing-function:cubic-bezier(0.33,0.66,0.66,1);
    -moz-transform: translate('0,0');
    -moz-transition-duration:0;
  }
}
