/* version 1.0 */

:root {
  /* Colors */
  --mgznkr-switch-button-color: #777;
  --mgznkr-switch-button-bgcolor: #fff;
  --mgznkr-switch-button-size: 1.5rem;
  --mgznkr-switch-button-border-width: 2px;
  --mgznkr-switch-button-space: 4px;
  --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 div:first-of-type,
.mgznkr-switch-labels div:first-of-type > * {
  text-align: right;
}

.mgznkr-switch-labels div:last-of-type,
.mgznkr-switch-labels div:last-of-type > * {
  text-align: left;
}

.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: var(--mgznkr-switch-button-size);
  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);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border: 0 solid var(--mgznkr-switch-button-color);
  border-radius: 50%;
}

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

.mgznkr-switch-input:checked + .mgznkr-switch-button:before {
  transform: translateX(calc(1.5 * var(--mgznkr-switch-button-size) - var(--mgznkr-switch-button-space)));
  background-color: #fff;
  border-color: #fff;
}