/* version 1.1 */

.mgznkr-switch {
  /* Colors */
  --mgznkr-switch-button-color: #777;
  --mgznkr-switch-button-bgcolor: #fff;
  --mgznkr-switch-button-size: 1.5rem;
  --mgznkr-switch-button-border-width: 0.3rem;
  --mgznkr-switch-button-space: 0.34rem;
  --mgznkr-switch-head-size: 2.4rem;
}

.mgznkr-switch h3 {
  font-size: var(--mgznkr-switch-head-size);
}

.mgznkr-switch-content {
  gap: 0;
}

.mgznkr-switch-labels.wp-block-columns + .wp-block-columns.mgznkr-switch-content {
  margin-top: calc(var(--mgznkr-switch-button-size) * 1.5);
}

.mgznkr-switch-content > .wp-block-column {
  display: block;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.4s;
}

.mgznkr-switch-content > .wp-block-column.active {
  opacity: 1;
  height: auto;
  min-width: 100%;
}

.mgznkr-switch-labels {
  gap: calc(var(--mgznkr-switch-button-size) * 2.5);
  margin-bottom: 0;
  flex-wrap: nowrap !important;
}

.mgznkr-switch-labels div:not(.active) {
  filter: grayscale(100%);
  opacity: 0.6;
}

.mgznkr-switch-labels label {
  display: flex;
  align-items: center;
  margin: 0;
}

.mgznkr-switch-labels > div {
  transition: 0.2s;
  cursor: pointer;
}

.mgznkr-switch-labels span.active {
  color: var(--mgznkr-switch-button-color);
  cursor: default;
}


.mgznkr-switch-labels input.mgznkr-switch-input {
  opacity: 0;
  width: 0;
  height: 0;
}

.mgznkr-switch-button {
  position: absolute;
  cursor: pointer;
  left: calc(50% - calc(1.5 * var(--mgznkr-switch-button-size) ));
  background-color: var(--mgznkr-switch-button-bgcolor);
  transition: 0.4s;
  border: var(--mgznkr-switch-button-border-width) solid
    var(--mgznkr-switch-button-color);
  border-radius: calc(var(--mgznkr-switch-button-size) + var(--mgznkr-switch-button-border-width));
  width: calc(3 * var(--mgznkr-switch-button-size));
  height: calc(
    (
        2 *
          (
            var(--mgznkr-switch-button-space) +
              var(--mgznkr-switch-button-border-width)
          )
      ) + var(--mgznkr-switch-button-size)
  );
  margin: 0 auto;
}

.mgznkr-switch-button:before {
  position: absolute;
  content: "";
  height: var(--mgznkr-switch-button-size);
  width: var(--mgznkr-switch-button-size);
  left: var(--mgznkr-switch-button-space);
  bottom: var(--mgznkr-switch-button-space);
  background-color: var(--mgznkr-switch-button-color);
  transform: translate(0, 0);
  transition: transform 0.25s ease-in-out;
  border: none;
  border-radius: 50%;
}

.mgznkr-switch-input:checked + .mgznkr-switch-button {
  background-color: var(--mgznkr-switch-button-color);
  border-color:  var(--mgznkr-switch-button-bgcolor);
}

.mgznkr-switch-input:checked + .mgznkr-switch-button:before {
  transform: translate(calc(1.5 * var(--mgznkr-switch-button-size) - var(--mgznkr-switch-button-space) - var(--mgznkr-switch-button-border-width)), 0);
  background-color: var(--mgznkr-switch-button-bgcolor);
}