/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* Framework Styles */
/*####### * Mark Styles * #######*/
[class*="fw-mark--"]{
    --root-padding-block: 0.3em;
    --root-padding-inline: 0.3em;
    --root-border-width: 1px;
    --root-border-color: var(--fw-neutral);
    --root-border-radius: var(--fw-radius--s);

    display: inline-flex;
    background: var(--root-background);
    color: var(--root-color);
    padding-block: var(--root-padding-block);
    padding-inline: var(--root-padding-inline);
    border: var(--root-border-width) solid var(--root-border-color);
    border-radius: var(--root-border-radius);
}
.fw-mark--primary{
    --root-background: transparent;
    --root-color: var(--fw-primary);
    --root-border-color: transparent;
}
.fw-mark--primary.fw-mark--reverse{
    --root-background: var(--fw-primary);
    --root-color: var(--fw-primary-l-6);
    --root-border-color: var(--fw-primary-d-1);
}

.fw-mark--secondary{
    --root-background: transparent;
    --root-color: var(--fw-secondary);
    --root-border-color: transparent;
}
.fw-mark--secondary.fw-mark--reverse{
    --root-background: var(--fw-secondary);
    --root-color: var(--fw-secondary-l-6);
    --root-border-color: var(--fw-secondary-d-1);
}



/** Bricks Forms */
.brxe-form {
    /* Inline form */
  }
  .brxe-form.fw-form--inline {
    flex-wrap: nowrap;
    column-gap: var(--fw-space--xs);
    align-items: center;
  }
  .brxe-form.fw-form--inline .form-group {
    padding: 0;
  }
  .brxe-form button[class*="bricks-button"] {
    --btn-border-width: 2px;
    --btn-border-color: #777;
    --btn-border-radius: var(--fw-radius--s);
    --btn-padding-block: var(--fw-space--s);
    --btn-padding-inlne: var(--fw-space--s);
    --btn-color: white;
    --btn-font-size: var(--fw-text--m);
    --btn-font-weight: inherit;
    --btn-font-family: inherit;
    --btn-text-decoration: initial;
    --btn-letter-spacing: initial;
    --btn-text-transform: initial;
    --btn-line-height: 1;
    --btn-background: var(--neutral);
    transition: all 300ms ease;
    border-style: solid !important;
    border-width: var(--btn-border-width) !important;
    border-color: var(--btn-border-color) !important;
    border-radius: var(--btn-border-radius) !important;
    padding-block: var(--btn-padding-block) !important;
    padding-inline: var(--btn-padding-inlne) !important;
    color: var(--btn-color) !important;
    font-size: var(--btn-font-size) !important;
    font-weight: var(--btn-font-weight) !important;
    line-height: var(--btn-line-height) !important;
    text-decoration: var(--btn-text-decoration) !important;
    text-transform: var(--btn-text-transform) !important;
    letter-spacing: var(--btn-letter-spacing) !important;
    background: var(--btn-background) !important;
  }
  .brxe-form button[class*="bricks-button"].sm {
    --btn-padding-block: var(--fw-space--xs);
    --btn-padding-inline: var(--fw-space--xs);
  }
  .brxe-form button.bricks-background-primary {
    --btn-border-color: var(--fw-primary);
    --btn-color: var(--fw-primary-l-6);
    --btn-background: var(--fw-primary);
  }
  .brxe-form button.bricks-background-primary:hover {
    --btn-border-color: var(--fw-primary-d-3);
    --btn-color: var(--fw-primary-l-5);
    --btn-background: var(--fw-primary-d-3);
  }
  .brxe-form button.bricks-background-primary:focus-visible {
    --btn-border-color: var(--fw-primary);
    --btn-color: var(--fw-primary-l-6);
    --btn-background: var(--fw-primary);
  }
  .brxe-form button.bricks-background-primary.fw-btn--outline {
    --btn-border-color: var(--fw-primary);
    --btn-color: var(--fw-primary);
    --btn-background: transparent;
  }
  .brxe-form button.bricks-background-primary.fw-btn--outline:hover {
    --btn-border-color: var(--fw-primary);
    --btn-color: var(--fw-primary-l-6);
    --btn-background: var(--fw-primary);
  }
  .brxe-form button.bricks-background-primary.fw-btn--outline:focus-visible {
    --btn-border-color: var(--fw-primary);
    --btn-color: var(--fw-primary);
    --btn-background: transparent;
  }
  .brxe-form button.bricks-background-secondary {
    --btn-border-color: var(--fw-secondary);
    --btn-color: var(--fw-secondary-l-6);
    --btn-background: var(--fw-secondary);
  }
  .brxe-form button.bricks-background-secondary:hover {
    --btn-border-color: var(--fw-secondary-d-3);
    --btn-color: var(--fw-secondary-l-5);
    --btn-background: var(--fw-secondary-d-3);
  }
  .brxe-form button.bricks-background-secondary:focus-visible {
    --btn-border-color: var(--fw-secondary);
    --btn-color: var(--fw-secondary-l-6);
    --btn-background: var(--fw-secondary);
  }
  .brxe-form button.bricks-background-secondary.fw-btn--outline {
    --btn-border-color: var(--fw-secondary);
    --btn-color: var(--fw-secondary);
    --btn-background: transparent;
  }
  .brxe-form button.bricks-background-secondary.fw-btn--outline:hover {
    --btn-border-color: var(--fw-secondary);
    --btn-color: var(--fw-secondary-l-6);
    --btn-background: var(--fw-secondary);
  }
  .brxe-form button.bricks-background-secondary.fw-btn--outline:focus-visible {
    --btn-border-color: var(--fw-secondary);
    --btn-color: var(--fw-secondary);
    --btn-background: transparent;
  }
  .brxe-form .input, .brxe-form input:not([type=submit]), .brxe-form select, .brxe-form textarea {
    background-color: var(--fw-white);
    border-top: 1px solid var(--fw-neutral-t-5);
    border-left: 1px solid var(--fw-neutral-t-5);
    border-bottom: 1px solid var(--fw-neutral-t-5);
    border-right: 1px solid var(--fw-neutral-t-5);
    border-radius: var(--fw-radius--s);
    color: var(--fw-neutral);
    font-family: inherit;
    font-size: var(--fw-text--m);
    font-weight: inherit;
    line-height: inherit;
    padding-inline: var(--fw-space--xs);
    padding-block: var(--fw-space--xs);
  }