.kc.sidebar {
  --icon-size: 3rem;
  background-color: #ccc;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.kc.sidebar > .closer {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  overflow: hidden;
  background-color: var(--kc-overlay-color);
  opacity: 0;
}
.kc.sidebar > .closer > i {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
  line-height: var(--icon-size);
  text-align: center;
  font-size: 1.5rem;
  color: var(--kc-base-color);
}
.kc.sidebar > .menu {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  overflow: auto;
  background-color: var(--kc-base-color);
  transform: translateX(calc(100% - var(--icon-size)));
}
.kc.sidebar > .menu > a {
  pointer-events: none;
  display: block;
  position: relative;
  width: inherit;
  height: auto;
  min-height: var(--icon-size);
  overflow: hidden;
  padding: calc((var(--icon-size) - 1rem) / 2) calc(var(--icon-size) + 1rem) calc((var(--icon-size) - 1rem) / 2) var(--icon-size);
  white-space: normal;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.2);
  color: inherit;
}
.kc.sidebar > .menu > a > i {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  line-height: var(--icon-size);
  text-align: center;
  font-size: 1.5rem;
}
.kc.sidebar.with-transition > .closer {
  will-change: opacity;
  transition: opacity var(--kc-animation-duration) var(--kc-animation-easing);
}
.kc.sidebar.with-transition > .menu {
  will-change: transform;
  transition: transform var(--kc-animation-duration) var(--kc-animation-easing);
}
.kc.sidebar.opened > .closer {
  pointer-events: auto;
  opacity: 1;
}
.kc.sidebar.opened > .menu {
  transform: translateX(var(--icon-size));
}
.kc.sidebar.opened > .menu > a {
  pointer-events: auto;
}
@media (min-width: 560px) {
  .kc.sidebar {
    width: 13rem;
  }
  .kc.sidebar > .closer {
    display: none;
  }
  .kc.sidebar > .menu {
    width: inherit;
    height: inherit;
    background-color: #ced;
    transform: unset;
  }
  .kc.sidebar > .menu > a {
    padding: calc((var(--icon-size) - 1rem) / 2) 1rem calc((var(--icon-size) - 1rem) / 2) var(--icon-size);
  }
  /*
    .kc.sidebar.opened {
        > .menu {
            transform: unset;
        }
    }
    */
}
/*# sourceMappingURL=./sidebar.css.map */