:host {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  position: relative;
  display: block;
  width: 12px;
  min-width: 12px;
  height: 12px;
}
@media (min-width: 36em) {
  :host {
    width: 16px;
    min-width: 16px;
    height: 16px;
  }
}

:host(.duet-spacer-horizontal) {
  display: inline-block;
  height: 100% !important;
}

:host(.duet-spacer-horizontal.xx-small) {
  width: 4px;
  min-width: 4px;
  height: 100%;
}
@media (min-width: 36em) {
  :host(.duet-spacer-horizontal.xx-small) {
    width: 4px;
    min-width: 4px;
  }
}

:host(.duet-spacer-horizontal.x-small) {
  width: 4px;
  min-width: 4px;
  height: 100%;
}
@media (min-width: 36em) {
  :host(.duet-spacer-horizontal.x-small) {
    width: 8px;
    min-width: 8px;
  }
}

:host(.duet-spacer-horizontal.small) {
  width: 8px;
  min-width: 8px;
  height: 100%;
}
@media (min-width: 36em) {
  :host(.duet-spacer-horizontal.small) {
    width: 12px;
    min-width: 12px;
  }
}

:host(.duet-spacer-horizontal.medium) {
  height: 100%;
}

:host(.duet-spacer-horizontal.large) {
  width: 16px;
  min-width: 16px;
  height: 100%;
}
@media (min-width: 36em) {
  :host(.duet-spacer-horizontal.large) {
    width: 20px;
    min-width: 20px;
  }
}

:host(.duet-spacer-horizontal.x-large) {
  width: 20px;
  min-width: 20px;
  height: 100%;
}
@media (min-width: 36em) {
  :host(.duet-spacer-horizontal.x-large) {
    width: 28px;
    min-width: 28px;
  }
}

:host(.duet-spacer-horizontal.xx-large) {
  width: 28px;
  min-width: 28px;
  height: 100%;
}
@media (min-width: 36em) {
  :host(.duet-spacer-horizontal.xx-large) {
    width: 36px;
    min-width: 36px;
  }
}

:host(.duet-spacer-horizontal.xxx-large) {
  width: 36px;
  min-width: 36px;
  height: 100%;
}
@media (min-width: 36em) {
  :host(.duet-spacer-horizontal.xxx-large) {
    width: 48px;
    min-width: 48px;
  }
}

:host(.duet-spacer-horizontal.xxxx-large) {
  width: 48px;
  min-width: 48px;
  height: 100%;
}
@media (min-width: 36em) {
  :host(.duet-spacer-horizontal.xxxx-large) {
    width: 72px;
    min-width: 72px;
  }
}

:host(.duet-spacer-vertical.xx-small) {
  width: 100%;
  height: 4px;
  min-height: 4px;
}

:host(.duet-spacer-vertical.x-small) {
  width: 100%;
  height: 4px;
  min-height: 4px;
}
@media (min-width: 36em) {
  :host(.duet-spacer-vertical.x-small) {
    height: 8px;
    min-height: 8px;
  }
}

:host(.duet-spacer-vertical.small) {
  width: 100%;
  height: 8px;
  min-height: 8px;
}
@media (min-width: 36em) {
  :host(.duet-spacer-vertical.small) {
    height: 12px;
    min-height: 12px;
  }
}

:host(.duet-spacer-vertical.medium) {
  width: 100%;
}

:host(.duet-spacer-vertical.large) {
  width: 100%;
  height: 16px;
  min-height: 16px;
}
@media (min-width: 36em) {
  :host(.duet-spacer-vertical.large) {
    height: 20px;
    min-height: 20px;
  }
}

:host(.duet-spacer-vertical.x-large) {
  width: 100%;
  height: 20px;
  min-height: 20px;
}
@media (min-width: 36em) {
  :host(.duet-spacer-vertical.x-large) {
    height: 28px;
    min-height: 28px;
  }
}

:host(.duet-spacer-vertical.xx-large) {
  width: 100%;
  height: 28px;
  min-height: 28px;
}
@media (min-width: 36em) {
  :host(.duet-spacer-vertical.xx-large) {
    height: 36px;
    min-height: 36px;
  }
}

:host(.duet-spacer-vertical.xxx-large) {
  width: 100%;
  height: 36px;
  min-height: 36px;
}
@media (min-width: 36em) {
  :host(.duet-spacer-vertical.xxx-large) {
    height: 48px;
    min-height: 48px;
  }
}

:host(.duet-spacer-vertical.xxxx-large) {
  width: 100%;
  height: 48px;
  min-height: 48px;
}
@media (min-width: 36em) {
  :host(.duet-spacer-vertical.xxxx-large) {
    height: 72px;
    min-height: 72px;
  }
}

:host(.duet-spacer-xx-small) {
  display: none;
}
@media (max-width: 22.5em) {
  :host(.duet-spacer-xx-small) {
    display: block;
  }
}

:host(.duet-spacer-x-small) {
  display: none;
}
@media (max-width: 35.9375em) {
  :host(.duet-spacer-x-small) {
    display: block;
  }
}

:host(.duet-spacer-small) {
  display: none;
}
@media (min-width: 36em) {
  :host(.duet-spacer-small) {
    display: block;
  }
}

:host(.duet-spacer-medium) {
  display: none;
}
@media (min-width: 48em) {
  :host(.duet-spacer-medium) {
    display: block;
  }
}

:host(.duet-spacer-large) {
  display: none;
}
@media (min-width: 62em) {
  :host(.duet-spacer-large) {
    display: block;
  }
}

:host(.duet-spacer-x-large) {
  display: none;
}
@media (min-width: 64.0625em) {
  :host(.duet-spacer-x-large) {
    display: block;
  }
}

:host(.duet-spacer-xx-large) {
  display: none;
}
@media (min-width: 76.25em) {
  :host(.duet-spacer-xx-large) {
    display: block;
  }
}