// >>-- 43 Checkbox Radio css start --<<

// form-check
@mixin checkbox_mixin($name, $color) {
  .form-check-#{$name} {
    
    &:checked{
      background-color: rgba(#{$color},1);
      border: 1px solid rgba(#{$color},1);
    }
    &:focus{
      box-shadow: 0 0 0 0.25rem rgba(#{$color},0.3);
      border: 1px solid rgba(#{$color},1);
    }
  }
}

@each $name, $color in $colors {
  @include checkbox_mixin("#{$name}", map-get($colors, $name));
}

@mixin check_mixin($name, $color) {
  .radiomark {
    &::before {
      background-color: rgba(var(--white),1);
    }
    &.check-#{$name} {
      background-color: rgba(#{$color}, 1);
    }
  }
  .checkmark {
    &:before {
      color: rgba(var(--white),1);
    }
    &.check-#{$name} {
      background-color: rgba(#{$color}, 1);
    }

    &.outline-#{$name} {
      border: 1px solid rgba(#{$color}, 1);
      &::before {
        color: rgba(#{$color}, 1);
      }
    }
    &.light-#{$name} {
      border: 1px solid rgba(#{$color}, 0.5);
      background-color: rgb(#{$color}, 0.1);
      &::before {
        color: rgba(#{$color}, 1);
      }
    }
  }
  .radiomark {
    &.outline-#{$name} {
      border: 1px solid rgba(#{$color}, 1);
      &::before {
        background-color: rgba(#{$color}, 1);
      }
    }
  }
  .radiomark {
    &.light-#{$name} {
      border: 1px solid rgba(#{$color}, 1);
      background-color: rgba(#{$color}, 0.1);
      &::before {
        background-color: rgba(#{$color}, 1);
      }
    }
  }

}
@each $name, $color in $colors {
  @include check_mixin("#{$name}", map-get($colors, $name));
}
.check-box {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  input {
    display: none;
  }

  input:checked ~ .radiomark:before,
  input:checked ~ .checkmark:before {
    transform: translate(-50%, -50%) scale(1);
  }

  .checkmark{
    border-radius: 2px;
  }

  .checkmark,
  .radiomark {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.6rem;
    &:before {
      position: absolute;
      transition: all 0.2s ease-in-out;
    }
  }
  .radiomark {
    border-radius: 50%;
    &:before {
      content: "";
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
    }
  }
  .checkmark {
    &:before {
      font-family: "tabler-icons";
      content: "\ea5e";
      font-size: 18px;
      font-weight: 600;
      line-height: 18px;
      top: 9px;
      left: 13px;
      transform: translate(-50%, -50%) scale(0);
    }
  }
}

// checkbox with image
.form-checkimage {
  cursor: pointer;
  margin-bottom: 10px;
  .checkimage-input {
    z-index: -1;
    opacity: 0;
    &:checked {
      & ~ .check-box {
        &:before {
          font-family: "tabler-icons" !important;
          content: "\ea5e";
          background-color: rgb(var(--primary), 1);
          font-size: 16px;
          padding-left: 2px;
          line-height: 18px;
          font-weight: 600;
        }
        &.radiobox {
          &:before {
            font-family: "tabler-icons" !important;
            content: "\f671";
            font-size: 10px;
            text-align: center;
            line-height: 20px;
            padding-left: 4px;
          }
        }
        .checkbox-image {
          filter: blur(0px);
        }
      }
    }
  }
  .check-box {
    position: relative;
    display: block;
    border: 1px solid var(--border_color);
    border-radius: var(--bs-border-radius);
    &:before {
      content: "";
      position: absolute;
      top: 10px;
      left: 15px;
      z-index: 1;
      color: rgba(var(--white),1);
      width: 20px;
      height: 20px;
      border-radius: 2px;
      background-color: rgba(var(--white),1);
    }
    &.radiobox {
      &:before {
        color: rgba(var(--white),1);
        width: 20px;
        height: 20px;
        line-height: 24px;
        border-radius: 50px;
        background-color: rgba(var(--white),1);
      }
    }
    .checkbox-image {
      filter: blur(1px);
      border-radius: inherit;
    }
  }
}
// selectgroup
.form-selectgroup {
  .select-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border_color);
    padding: 0.4rem 0.75rem;
    border-radius: var(--bs-border-radius);
    margin-bottom: 15px;
    .form-check-input{
      position: absolute;
    }
    .form-check-label{
      margin-left: 25px;
    }
}
  .select-items {
    position: relative;
    .select-input {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      opacity: 0;
      &:checked {
        & ~ .select-box {
          .selectitem {
            border: 2px solid rgb(var(--primary), 1);
            color: rgb(var(--primary), 1);
          }
        }
      }
    }
    .select-box {
      display: flex;
      margin: 8px 0px;
      .selectitem {
        border: 1px solid var(--border_color);
        border-radius: var(--app-border-radius);
        padding: 0.375rem 0.75rem;
      }
    }
  }
  .text-secondary {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}
.form-check-input{
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(var(--secondary),.4);
  &:checked{
    background-color: rgba(var(--primary), 1);
    border-color: rgba(var(--primary), 1);
  }
  &:focus{
    box-shadow: 0 0 0 .25rem rgba(var(--primary), .2);
  }
}
// >>-- 43 Checkbox Radio css end --<<