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

.mie.radio {
  display: inline-block;
  position: relative;

  > .input {
    display: none;
  }

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

    align-items: center;
    display: flex;

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

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

// Default radio style
.mie.radio {
  > .label {
    > .indicator {
      border: 0.2rem solid mvar("radio.border.active");
      background-color: rgba(0, 0, 0, 0);
      border-radius: 50%;

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

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

      &::before {
        transition: opacity 0.2s ease;

        height: mvar("radio.inner.size");
        width: mvar("radio.inner.size");
        left: mvar("radio.inner.mh");
        top: mvar("radio.inner.mv");

        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        content: "";

        opacity: 0;
      }
    }
  }

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

      &::before {
        opacity: 1;
      }
    }
  }
}
