:host {
  position: fixed;
        top: -120px;
        right: 0;
        bottom: -120px;
        left: 0;

        visibility: hidden;

        transition-property: visibility;
}

:host([opened]) {
  visibility: visible;
}

:host([persistent]) {
  width: var(--app-drawer-width, 256px);
}

:host([persistent][position=left]) {
  right: auto;
}

:host([persistent][position=right]) {
  left: auto;
}

#contentContainer {
  position: absolute;
        top: 0;
        bottom: 0;
        left: 0;

        width: var(--app-drawer-width, 256px);
        padding: 120px 0;

        transition-property: -webkit-transform;
        transition-property: transform;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);

        background-color: #FFF;

        ;
}

#contentContainer[persistent] {
  width: 100%;
}

#contentContainer[position=right] {
  right: 0;
        left: auto;

        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
}

#contentContainer[swipe-open]::after {
  position: fixed;
        top: 0;
        bottom: 0;
        left: 100%;

        visibility: visible;

        width: 20px;

        content: '';
}

#contentContainer[swipe-open][position=right]::after {
  right: 100%;
        left: auto;
}

#contentContainer[opened] {
  -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}

#scrim {
  position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        transition-property: opacity;
        -webkit-transform: translateZ(0);
        transform:  translateZ(0);

        opacity: 0;
        background: var(--app-drawer-scrim-background, rgba(0, 0, 0, 0.5));
}

#scrim.visible {
  opacity: 1;
}

:host([no-transition]) #contentContainer {
  transition-property: none;
}

