.form-group {
  margin-bottom: 1rem;

  label {
    font-size: 14px;
    font-weight: 500;
  }
}

select.form-control,
.form-control {
  &:hover {
    background-color: $gray-100;
  }

  &[readonly] {
    opacity: 0.6;
  }
}

.input-group-text svg {
  width: 18px;
  height: 18px;
}

.form-control-color-picker {
  height: 43px;
  padding: 0.5rem;
}

select.form-control {
  appearance: none;
  background: #{$input-bg}
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
    no-repeat right 0.75rem center/18px 25px;

  &[data-multiselectsplitter-firstselect-selector],
  &[data-multiselectsplitter-secondselect-selector] {
    background: none;
  }
}

.form-floating {
  > label {
    top: 1px;

    &::after {
      background: transparent !important;
    }
  }

  > .form-control:focus,
  > .form-control:not(:placeholder-shown),
  > .form-select {
    ~ label {
      color: $gray-600;
    }
  }

  > .form-control:focus {
    ~ label {
      color: $component-active-bg;
    }
  }

  > input {
    color: $body-color;
  }
}

.user-card {
  .form-search {
    position: relative;
    i {
      position: absolute;
      top: 12px;
      left: 15px;
      font-size: 14px;
    }
    .form-control {
      padding-left: 42px;
      background: transparent;
    }
  }

  .btn {
    i {
      font-size: inherit;
    }
    span {
      white-space: pre;
    }
  }
}

.form-check {
  label {
    cursor: pointer;

    input {
      cursor: pointer;
    }
  }
}

@each $color, $value in $theme-colors {
  .form-check {
    .form-check-input {
      &.input-#{$color} {
        &:checked {
          border-color: $value;
          background-color: $value;
        }
      }

      &.input-light-#{$color} {
        &:checked {
          border-color: shift-color($value, $soft-bg-level);
          background-color: shift-color($value, $soft-bg-level);

          &[type='checkbox'] {
            background-image: escape-svg(
              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$value}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>")
            );
          }

          &[type='radio'] {
            background-image: escape-svg(
              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$value}'/></svg>")
            );
          }
        }
      }

      &.input-#{$color},
      &.input-light-#{$color} {
        &:focus {
          &[type='checkbox'],
          &[type='radio'] {
            box-shadow: 0 0 0 0.2rem rgba($value, 0.25);
            border-color: $value;
          }
        }
      }
    }

    &.form-switch {
      .form-check-input.input-light-#{$color} {
        &:checked {
          background-image: escape-svg(
            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$value}'/></svg>")
          );
        }
      }
    }
  }
}

.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child),
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text {
  border-right: none;
}

// sticky header start
.sticky-action {
  top: $header-height;
  position: sticky;
  z-index: 1020;
  background: var(--bs-card-bg);
  border-radius: var(--bs-card-border-radius);
}
// sticky header end

// switch v1 start
.switch-demo {
  .custom-switch-v1 {
    margin-bottom: 4px;
  }
}
.custom-switch-v1 {
  &.form-switch {
    padding-left: 2.9em;

    .form-check-input {
      height: 20px;
      width: 35px;
      margin-left: -2.9em;
      background-image: escape-svg(
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4.1' fill='#{$form-switch-color}'/%3e%3c/svg%3e")
      );
      transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
      //box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);

      &[class*='input-light-'] {
        border: none;
      }

      &:focus {
        box-shadow: none;
        border-color: rgba(0, 0, 0, 0.25);
      }

      &:checked {
        background-image: escape-svg(
          url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4.1' fill='%23ffffff'/%3e%3c/svg%3e")
        );
      }
    }

    @each $color, $value in $theme-colors {
      .form-check-input.input-light-#{$color} {
        &:checked {
          background-image: escape-svg(
            url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4.1' fill='#{$value}'/%3e%3c/svg%3e")
          );
        }
      }
    }
  }

  // ===========
  .custom-control-label {
    &::before {
      transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
      height: 20px;
      width: 35px;
      border-radius: 0.8rem;
      top: 0;
      left: -2.55rem;
    }

    &::after {
      top: calc(0.15625rem - 2px);
      left: calc(-2.25rem - 4px);
      height: 19px;
      width: 19px;
      border-radius: 0.7rem;
      box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.1),
        0 4px 0 0 rgba(0, 0, 0, 0.04),
        0 4px 9px rgba(0, 0, 0, 0.13),
        0 3px 3px rgba(0, 0, 0, 0.05);
      transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
    }
  }

  .custom-control-input {
    &:checked ~ .custom-control-label::after {
      transform: translateX(0.95rem);
    }
  }

  // ===========
}
// switch v1 end