@use "../variables" as *;
@use "../mixins" as *;
@use "../utils" as *;

.mie.toggle {
  display: inline-block;
  position: relative;
  cursor: pointer;

  > .input {
    display: none;
  }

  > .label {
    align-items: center;
    display: flex;

    position: relative;
    cursor: pointer;

    > .content {
      font-size: mvar("toggle.fs");
      color: mvar("toggle.fg");
      font-weight: 400;

      margin-left: mvar("toggle.content.space");
    }
  }
}

.mie.toggle {
  > .label {
    > .indicator {
      background-color: mvar("toggle.bg.inactive");
      border-radius: mvar("toggle.rounded");

      transition: background-color 0.2s ease;
      position: relative;
      display: block;

      height: mvar("toggle.height");
      width: mvar("toggle.width");

      > .dot {
        box-shadow: 0rem 0.2rem 0.5rem 0rem rgba(0, 0, 0, 0.3);
        transition: transform 0.3s;
        background-color: #fff;
        border-radius: 50%;

        position: absolute;
        z-index: 2;

        height: mvar("toggle.indicator.height");
        width: mvar("toggle.indicator.width");

        left: mvar("toggle.indicator.offset.h");
        top: mvar("toggle.indicator.offset.v");

        @include flex(row, center, center);

        > .icon {
          > svg {
            max-height: mvar("toggle.indicator.icon.size");
            max-width: mvar("toggle.indicator.icon.size");

            height: mvar("toggle.indicator.icon.size");
            width: mvar("toggle.indicator.icon.size");

            color: mvar("toggle.indicator.icon.color");
          }
        }
      }

      > .icon.layout {
        position: absolute;

        height: 100%;
        width: 100%;

        z-index: 8;

        svg {
          max-height: mvar("toggle.indicator.icon.size");
          max-width: mvar("toggle.indicator.icon.size");

          height: mvar("toggle.indicator.icon.size");
          width: mvar("toggle.indicator.icon.size");

          color: mvar("toggle.indicator.icon.fg");
        }

        .checked,
        .unchecked {
          height: mvar("toggle.indicator.height");
          width: mvar("toggle.indicator.width");
          position: absolute;

          justify-content: center;
          align-items: center;
          display: flex;
        }

        .checked {
          top: mvar("toggle.indicator.offset.v");
          left: 0;
        }

        .unchecked {
          top: mvar("toggle.indicator.offset.v");
          right: 0;
        }
      }
    }
  }

  // When checked
  .input:checked + .label {
    > .indicator {
      background-color: mvar("toggle.bg.active");

      > .dot {
        transform: translateX(mvar("toggle.indicator.active.offset"));
      }
    }
  }
}
