:root{
  --form-input-height: 42px;
  --form-color: var(--at-form-input-color);
  --control-size: calc(var(--at-form-input-height, 42px) * .6);
  --control-gap-x: var(--at-space--3xs, .35rem);
  --control-radius: calc(var(--at-form-input-border-radius, .35rem) * .75);
  --control-bw: var(--at-form-input-border-width, 1px);
  --control-bc: var(--at-form-input-border-color, #e5e7eb);
  --control-bg: var(--at-form-input-background-color, #fff);

  
  --control-active: var(--at-form-radio-active-color, #2563eb);
  --control-ink: var(--at-form-icon-color, #fff);
  --control-bc-active: var(--at-form-input-border-color--focus, #2563eb);

  --icon-scale: 70%;

  
  --checkbox-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='m14.914 4l-9.47 9.47L1.09 8.393L2.608 7.09l2.948 3.44L13.5 2.585z'/%3E%3C/svg%3E");
}


:is(.brxe-form, .brxe-brf-pro-forms) input[type="text"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="email"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="url"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="tel"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="search"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="password"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="number"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="date"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="datetime-local"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="month"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="week"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="time"],
:is(.brxe-form, .brxe-brf-pro-forms) select{
  min-height: var(--form-input-height, 42px);
}

:is(.brxe-form, .brxe-brf-pro-forms) label {
  margin-bottom: calc(var(--at-gutter-small)/2)!important;
}




:is(.brxe-form, .brxe-brf-pro-forms) input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 0.1px;
  height: 0.1px;
  overflow: hidden;
  z-index: -1;
}


:is(.brxe-form, .brxe-brf-pro-forms) .choose-files {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--at-form-input-height, 42px);
  padding: 0 1rem;
  border: var(--control-bw) solid var(--control-bc);
  border-radius: var(--control-radius);
  background: var(--control-bg);
  color: var(--at-form-color, #111);
  cursor: pointer;
  transition: all .15s ease;
  font-size: inherit;
  font-family: inherit;
  text-decoration: none;
  margin-bottom: 0 !important;
  user-select: none;
}


:is(.brxe-form, .brxe-brf-pro-forms) .choose-files:hover {
  border-color: var(--control-active);
  background: color-mix(in srgb, var(--control-active) 5%, var(--control-bg));
}


:is(.brxe-form, .brxe-brf-pro-forms) .choose-files:focus,
:is(.brxe-form, .brxe-brf-pro-forms) input[type="file"]:focus + .choose-files {
  outline: var(--at-form-focus-ring-width, 2px) solid var(--at-form-focus-ring-color, #2563eb);
  outline-offset: var(--at-form-focus-ring-offset, 2px);
  box-shadow: var(--at-form-focus-ring);
  border-color: var(--at-form-focus-color, #2563eb);
}


:is(.brxe-form, .brxe-brf-pro-forms) .file-result {
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: var(--control-bw) solid var(--control-bc);
  border-radius: var(--control-radius);
  background: var(--control-bg);
  margin-bottom: 0.5rem;
  transition: all .15s ease;
}


:is(.brxe-form, .brxe-brf-pro-forms) .file-result.show {
  display: flex;
}


:is(.brxe-form, .brxe-brf-pro-forms) .file-result .text {
  flex: 1;
  color: var(--at-form-color, #111);
  font-size: 0.9em;
  word-break: break-all;
}


:is(.brxe-form, .brxe-brf-pro-forms) .file-result .remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: transparent;
  border: var(--control-bw) solid var(--control-bc);
  border-radius: var(--control-radius);
  color: #dc2626;
  cursor: pointer;
  transition: all .15s ease;
  font-size: 0.8em;
  min-height: auto;
  margin: 0;
}


:is(.brxe-form, .brxe-brf-pro-forms) .file-result .remove:hover {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
}


:is(.brxe-form, .brxe-brf-pro-forms) .file-result .remove:focus {
  outline: var(--at-form-focus-width, 2px) solid var(--at-form-focus-color, #2563eb);
  outline-offset: var(--at-form-focus-offset, 2px);
  box-shadow: var(--at-form-focus-ring);
}


:is(.brxe-form, .brxe-brf-pro-forms) .file-result svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  margin-left: 0.25rem;
}


:is(.brxe-form, .brxe-brf-pro-forms) .form-group.file {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}


:is(.brxe-form, .brxe-brf-pro-forms) .file-result.error {
  border-color: #dc2626;
  background: color-mix(in srgb, #dc2626 5%, var(--control-bg));
}

:is(.brxe-form, .brxe-brf-pro-forms) .file-result.error .text {
  color: #dc2626;
}


:is(.brxe-form, .brxe-brf-pro-forms) .file-result.success {
  border-color: #16a34a;
  background: color-mix(in srgb, #16a34a 5%, var(--control-bg));
}

:is(.brxe-form, .brxe-brf-pro-forms) .file-result.success .text {
  color: #16a34a;
}


:is(.brxe-form, .brxe-brf-pro-forms) input[type="checkbox"],
:is(.brxe-form, .brxe-brf-pro-forms) input[type="radio"]{
  appearance: none;
  inline-size: var(--control-size);
  block-size: var(--control-size);
  margin: 0;
  padding: 0;
  vertical-align: middle;
  border: var(--control-bw) solid var(--control-bc);
  background: var(--control-bg);
  position: relative;
  transition: background-color .15s, border-color .15s;
  color: var(--form-color, #111);
  flex-shrink: 0;
}


:is(.brxe-form, .brxe-brf-pro-forms) input[type="checkbox"]{
  border-radius: var(--control-radius);
}

:is(.brxe-form, .brxe-brf-pro-forms) input[type="checkbox"]:checked{
  background: var(--control-active);
  border-color: var(--control-active)!important;
  color: var(--control-ink);                
  background-image: var(--checkbox-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-scale) var(--icon-scale);
}


:is(.brxe-form, .brxe-brf-pro-forms) input[type="checkbox"]:indeterminate{
  background: var(--control-active);
  border-color: var(--control-active);
  color: var(--control-ink)!important;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% 2px;
}


:is(.brxe-form, .brxe-brf-pro-forms) input[type="radio"]{
  border-radius: 50%;
}

:is(.brxe-form, .brxe-brf-pro-forms) input[type="radio"]:checked{
  background: var(--control-active);
  border-color: var(--control-active);
  background-image: radial-gradient(circle, var(--control-ink) 0 50%, transparent 51%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 52% 52%;
}


:is(.brxe-form, .brxe-brf-pro-forms) input[type="checkbox"]:is(:focus, :focus-visible),
:is(.brxe-form, .brxe-brf-pro-forms) input[type="radio"]:is(:focus, :focus-visible){
  outline: var(--at-form-focus-width) solid var(--at-form-focus-color);
  outline-offset: var(--at-form-focus-offset);
  box-shadow: var(--at-form-focus-ring);
  border-color: var(--at-form-focus-color);
}


:where(input, select, textarea, button, [role="button"], .button):is(:focus, :focus-visible){
  outline: var(--at-form-focus-width) solid var(--at-form-focus-color);
  outline-offset: var(--at-form-focus-offset);
  box-shadow: var(--at-form-focus-ring);
}
:where(input, select, textarea, button, [role="button"], .button):focus:not(:focus-visible){
  outline: none;
  box-shadow: none;
}


@media (forced-colors: active){
  :where(input, select, textarea, button, [role="button"], .button):is(:focus, :focus-visible){
    outline: 2px solid CanvasText;
    outline-offset: 2px;
    box-shadow: none;
  }
}


@media (prefers-contrast: more){
  :where(input, select, textarea, button, [role="button"], .button):focus-visible{
    outline-width: max(3px, var(--at-form-focus-width));
    box-shadow: var(--at-form-focus-ring);
  }
}


:is(.brxe-form, .brxe-brf-pro-forms) textarea {
  resize: vertical;
  max-width: 100%;
  overflow: auto;
}


:is(.brxe-form, .brxe-brf-pro-forms) .message{
  border-radius: var(--at-form-border-radius, .5rem);
}
:is(.brxe-form, .brxe-brf-pro-forms) button[type="submit"].sending,
:is(.brxe-form, .brxe-brf-pro-forms) input[type="submit"].sending{
  gap: 8px;
}


:is(.brxe-form, .brxe-brf-pro-forms) .form-group .form-group-error-message {
    background-color: var(--bricks-bg-danger);
    color: var(--bricks-text-danger);
    padding: var(--at-space--2xs) var(--at-space--xs);
    width: auto;
    margin-top: 5px;
    font-size: var(--at-text--xs);
    margin-right: auto;
    border-radius: 6px;
    line-height: 1.2;
}