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

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

  > .input {
    display: none;
  }

  > .label {
    position: relative;
    cursor: pointer;

    align-items: center;
    display: flex;

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

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

// Default checkbox style
.mie.checkbox {
  --mie-checkbox-rounded: 0.6rem;

  > .label {
    > .indicator {
      border: 0.2rem solid mvar("checkbox.border");
      border-radius: mvar("checkbox.rounded");
      background-color: rgba(0, 0, 0, 0);
      display: block;

      transition:
        background 0.3s ease,
        width 0.3s ease,
        height 0.3s ease;

      height: mvar("checkbox.size");
      width: mvar("checkbox.size");

      > .icon {
        > svg {
          color: mvar("checkbox.icon.fg");
          transition: color 0.2s ease;

          margin: mvar("checkbox.icon.offset");
          height: mvar("checkbox.icon.size");
          width: mvar("checkbox.icon.size");

          opacity: 0;
        }
      }
    }
  }

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

      > .icon {
        > svg {
          opacity: 1;
        }
      }
    }
  }

  // Circular checkbox style
  &.circular {
    > .label > .indicator {
      border-radius: 50%;
    }
  }
}
