.drawer__icon {
  width: 50px;
  height: 50px;
  transition: background-color 300ms ease-in-out;
}

.drawer_icon_black {
  background-color: #000 !important;
}

.drawer svg path, .drawer svg .st0 {
  fill: #FFF !important;
  stroke: #FFF !important;
  transition: fill 500ms ease;
}

.drawer:hover svg path, .drawer:hover svg .st0 {
  fisll: var(--clic-groen) !important;
}

.drawer__label {
  right: 0;
  bottom: 0;
  position: absolute;
  padding: 0px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 25px;
  overflow: hidden;
  opacity: 0;
}

.drawer__label span {
  padding-left: 30px;
  padding-right: 73px;
  line-height: 50px;
  font-size: 14px;
  color: transparent;
  transition: color 200ms ease;
  font-weight: 500;
}

.drawer.active > .drawer__label span {
  color: #FFF;
}

.drawer__icon {
  right: 0;
  bottom: 0;
  position: absolute;
  padding: 11px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  transition: background-color 200ms ease;
}

.drawer.active > .drawer__icon {
  background: black;
}

/* =================================== */
/* labels die naar rechts uitschuiven: */
.drawer__icon + .drawer__label {
  right: inherit;
}

.drawer__icon + .drawer__label span {
  padding-left: 73px;
  padding-right: 30px;
}

.drawer__icon:first-child {
  left: 0;
  z-index: 9999;
  right: inherit;
}

/* =================================== */
.drawer-center {
  transition: opacity 600ms ease, margin-left 200ms ease-in-out !important;
}

/*# sourceMappingURL=drawer.css.map */