/* global CSS */
@media (max-width: 40em) {
  /* convert button with text to icon-only */
  /*
  .ui-controlgroup .morph {
    width: auto;
    height: 100%;
  }
  .ui-controlgroup .morph .ui-btn-inner {
    height: 20px;
    padding: .6em 20px .6em 20px;
  }
  .ui-controlgroup-horizontal .morph .ui-btn-inner {
    width: 11px;
  }
  .ui-header .ui-controlgroup .morph .ui-btn-inner,
  .ui-footer .ui-controlgroup .morph .ui-btn-inner {
    height: 16px;
    padding: .55em 11px .5em 11px;
  }
  */
  .morph.ui-btn-icon-left:after {
    left: 0.2em;/* ui-btn-icon-left:after */
  }
  .morph.ui-btn-icon-right:after {
    left: 0.2em;/* ui-btn-icon-right:after */
  }
  .morph.ui-btn-icon-left,
  .morph.ui-btn-icon-right {
    height: 1.5em;
    text-indent: -9999px;
    white-space: nowrap !important;
    width: 1.5em;
    padding: 0;
    border-radius: 1em;
    font-size: 16px;
    -webkit-border-radius: 1em;
  }
}

/* upper boundaries */
@media (min-width: 45em) {
  .ui-controlgroup .morph {
    padding: 0 .75em;
  }
}

/* ranges */
@media (max-width: 20em) {
  .ui-controlgroup .morph {
    padding: 0 .25em;
  }
}
@media (min-width: 20.01em) and (max-width: 30em) {
  .ui-controlgroup .morph {
    padding: 0 .4em;
  }
}
@media (min-width: 30.01em) and (max-width: 40em) {
  .ui-controlgroup .morph {
    padding: 0 .75em;
  }
}