@import url('../CloudTheme.css');

label.root {
  margin-left: 0;

  .label {
    line-height: 20px;
  }

  &:global(.Mui-disabled) {
    cursor: not-allowed;

    .label {
      opacity: 0.5;
    }
  }

  .checkbox {
    padding: 0 8px 0 0;
  }
}

span.checkbox {
  rect {
    &:first-of-type {
      stroke: #fff;
      stroke-width: 2px;
    }
  }

  &:not(.disabledCheckbox):hover {
    .checkboxIcon {
      .inner {
        border-color: $blue-blue1;
        box-shadow: 0 0 0 2px $blue-blue4;
      }
    }
  }

  &.disabledCheckbox {
    pointer-events: auto;
    cursor: not-allowed;
  }

  .checkboxIcon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    box-sizing: border-box;

    .inner {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 16px;
      height: 16px;
      box-sizing: border-box;
      border: 1px solid $stroke-stroke2;
      border-radius: 4px;
      box-shadow: $shadow-light;
      transition: border-color 0.2s ease-in-out, background-color 0.2s,
        box-shadow 0.1s ease-in-out;
    }

    &.disabled {
      opacity: 0.5;

      .inner {
        background-color: $black-black4;
      }
    }

    &.indeterminate,
    &.checked {
      .inner {
        border-color: $blue-blue1;
        background-color: $blue-blue1;
      }
    }
  }
}