@use 'sass:map';
@use '../base/colors';
@use '../base/typography';
@use '../base/opacity';

@mixin mx-checkbox-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $current-theme: colors.$mx-light;

  @if $is-dark == true {
    $current-theme: colors.$mx-dark;
  }

  .mat-mdc-checkbox {
    color: map.get($current-theme, onSurface);

    .mdc-checkbox {
      .mdc-checkbox__native-control {
        &:enabled:checked ~ .mdc-checkbox__background,
        &:enabled:indeterminate ~ .mdc-checkbox__background,
        &[data-indeterminate='true']:enabled ~ .mdc-checkbox__background {
          background-color: map.get($current-theme, primary) !important;
          border-color: map.get($current-theme, primary) !important;
        }

        &:enabled:not(:checked):not(:indeterminate):not([data-indeterminate='true']) ~ .mdc-checkbox__background {
          border-color: map.get($current-theme, onSurface) !important;
        }

        &[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate='true']) ~ .mdc-checkbox__background {
          border-color: rgba(map.get($current-theme, onSurface), opacity.$opacity-38) !important;
        }

        &[disabled]:checked ~ .mdc-checkbox__background,
        &[disabled]:indeterminate ~ .mdc-checkbox__background,
        &[data-indeterminate='true'][disabled] ~ .mdc-checkbox__background {
          background-color: rgba(map.get($current-theme, onSurface), opacity.$opacity-38) !important;
        }

        &:enabled ~ .mdc-checkbox__background .mdc-checkbox__checkmark,
        &:disabled ~ .mdc-checkbox__background .mdc-checkbox__checkmark {
          color: map.get($current-theme, surface) !important;
        }

        &:enabled ~ .mdc-checkbox__background .mdc-checkbox__mixedmark,
        &:disabled ~ .mdc-checkbox__background .mdc-checkbox__mixedmark {
          border-color: map.get($current-theme, surface) !important;
        }
      }

      &:hover {
        .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate='true'])
          ~ .mdc-checkbox__background {
          border-color: map.get($current-theme, onSurface) !important;
        }

        .mat-mdc-checkbox-ripple {
          background-color: rgba(map.get($current-theme, onSurface), opacity.$opacity-8);
          .mat-ripple-element {
            background-color: map.get($current-theme, onSurface);
            opacity: 0.04; // .12 - .08
          }
        }

        .mdc-checkbox--selected ~ .mat-mdc-checkbox-ripple {
          background-color: rgba(map.get($current-theme, primary), opacity.$opacity-8);
        }
      }
    }

    .mdc-form-field {
      label {
        color: map.get($current-theme, onSurface);
        // NOTE: This is a deprecated class, it will be removed in the future
        .mx-checkbox-hint--deprecated,
        .mx-checkbox-hint {
          color: map.get($current-theme, onSurfaceVariant);
        }
      }
    }

    &.mat-mdc-checkbox-disabled {
      .mdc-form-field {
        label {
          color: rgba(map.get($current-theme, onSurface), opacity.$opacity-38);
          .mx-checkbox-hint {
            @extend .opacity-038;
          }
          // NOTE: This is a deprecated class, it will be removed in the future
          .mx-checkbox-hint--deprecated {
            color: rgba(map.get($current-theme, onSurfaceVariant), opacity.$opacity-38);
          }
        }
      }
    }
  }

  .gl-checkbox-group-label {
    color: map.get($current-theme, onSurfaceVariant);
  }

  .mx-checkbox-info-tooltip {
    .mat-icon {
      color: map.get($current-theme, onSurfaceVariant);
    }
  }
}

.mat-mdc-checkbox {
  @extend .gl-body-md;

  .mdc-form-field {
    align-items: start;

    label {
      padding-top: 10px;
      // NOTE: This is a deprecated class, it will be removed in the future
      .mx-checkbox-hint--deprecated,
      .mx-checkbox-hint {
        @extend .gl-body-sm;
        padding: 2px 0 4px;
      }
      .mat-icon {
        width: 16px;
        height: 16px;
        line-height: 16px;
      }
    }
  }
}

.gl-checkbox-group-horizontal {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 4px;

  .mat-mdc-checkbox {
    margin-right: 16px;
  }
}

.gl-checkbox-group-vertical {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 4px;

  .mat-mdc-checkbox + .mat-mdc-checkbox {
    margin-top: -4px;
  }
}

.gl-checkbox-group-label {
  @extend .gl-body-sm;
}

/* mx-checkbox-tooltip */
.mx-checkbox-info-tooltip {
  display: inline-flex;

  &__hidden {
    display: none;
  }
}

.mx-checkbox-tooltip-wrapper {
  display: inline-flex;
  align-items: center;
  grid-gap: 6px;

  &__before {
    flex-direction: row-reverse;
  }

  .mat-icon {
    width: 16px;
    height: 16px;
  }
}