/*
 Theme Name:   MIO Blank Canvas
 Theme URI:    https://miocreative.studio/
 Description:  Use this child theme to extend Bricks.
 Author:       MIO Creative Studio
 Author URI:   https://miocreative.studio/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* # Sets section padding top when using sticky header */
div :is(section.brxe-section:not(header.brx-sticky > section)) {
  padding-top: calc( var(--space-section-m) + var(--space-section-s) ) !important;
}

main section:first-of-type,
main section.brxe-section:first-of-type {
  padding-top: calc(var(--space-section-2xl) + var(--space-section-s));
}

/* # Buttons */
*:where(button) {
  margin-block-start: var(--spacing-s);
}

/* --- # Images ------ */
:where(div) img,
:where(div) figure,
:where(.brxe-block) figure {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* --- Forms ------ */
/* # Forms Variables Dark & Light - uncomment if not sing Bricks variables */
:root {
  --form-border-width: 0rem;
  --form-border-radius: 4px;
  --form-btn-text-transform: uppercase;
  
  /* ## Dark */
  --form-bg-dark: var(--primary-l-1);
  --form-text-color-dark: var(--primary);
  --form-border-color-dark: var(--primary-l-2);
  /* ### Buttons */
  --form-btn-bg-dark: var(--secondary);
  --form-btn-text-dark: var(--primary);
  --form-btn-border-dark: var(--secondary);

  /* ## Light */
  --form-bg-light: var(--primary-l-1);
  --form-text-color-light: var(--primary);
  --form-border-color-light: var(--primary-d-2);
  /* ### Buttons */
  --form-btn-bg-light: var(--primary);
  --form-btn-text-light: var(--white);
  --form-btn-border-light: var(--primary);
}

/* # Brx Forms */
.cs-form--light,
.cs-form--dark {
  .input,
  input:not([type="submit"]),
  select,
  textarea,
  .bricks-search-form .input,
  .bricks-search-form input:not([type="submit"]), 
  .bricks-search-form select,
  .bricks-search-form textarea,
  .brxe-post-comments .input,
  .brxe-post-comments input:not([type="submit"]),
  .brxe-post-comments select,
  .brxe-post-comments textarea  {
    border-top-width: var(--form-border-width);
    border-right-width: var(--form-border-width);
    border-bottom-width: 0.1rem;
    border-left-width: var(--form-border-width);
    border-radius: var(--form-border-radius);
  }
  
  /* ## Button */
  button[type="submit"],
  .bricks-button[type="submit"],
  .bricks-button[class*="primary"] {
    padding: 0.5em 1.5em;
    border-radius: var(--form-border-radius) !important;
    text-transform: var(--form-btn-text-transform);
  }
  
  input[type="checkbox"] + .wsf-label:before {
    border-radius: 50px;
    height: 100% !important;
    width: 100% !important;
  }
  
  /* ## Style checkboxes to buttons */
  input[type="checkbox"] + label,
  input[type="checkbox"] + .wsf-label,
  .bricks-search-form input[type="checkbox"] + label,
  .brxe-post-comments input[type="checkbox"] + label {
    position: relative;
    cursor: pointer;
    padding: 7px 15px 7px;
    display: inline-block;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    border-radius: 50px;
    margin: 0;
    line-height: 1.2;
    letter-spacing: normal;
    transition: background-color 0.25s linear;
  }
  
  /* ## Change checkbox options into buttons */
  /* ### Display checkboxes with Flex and wrap (Bricks, and WSF forms) */
  :where(.brxe-form) .options-wrapper,
  :where(.wsf-form) .wsf-field-wrapper div {
    display: flex;
    flex-wrap: wrap;
    column-gap: 4px;
    row-gap: 8px;
    align-items: baseline;
  }

  .options-wrapper li,
  .wsf-field-wrapper div div {
    width: auto;
  }
  
  /* ### Upload file button  */
  :where(.brxe-form) .form-group .choose-files {
    padding: 12px 24px !important;
  }
  
  /* Woo Form with Automatic CSS (.form--light, .form--dark) */
  input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input) {
    position: static;
    opacity: 1;
    width: 16px;
    height: 16px;
  }
}

/* ## Light */
.cs-form--light {
  .input,
  input:not([type="submit"]),
  select,
  textarea,
  .bricks-search-form .input,
  .bricks-search-form input:not([type="submit"]), 
  .bricks-search-form select,
  .bricks-search-form textarea,
  .brxe-post-comments .input,
  .brxe-post-comments input:not([type="submit"]),
  .brxe-post-comments select,
  .brxe-post-comments textarea  {
    background: var(--form-bg-light);
  }
}  

/* ## Dark */
.cs-form--dark {
  .input,
  input:not([type="submit"]),
  select,
  textarea,
  .bricks-search-form .input,
  .bricks-search-form input:not([type="submit"]), 
  .bricks-search-form select,
  .bricks-search-form textarea,
  .brxe-post-comments .input,
  .brxe-post-comments input:not([type="submit"]),
  .brxe-post-comments select,
  .brxe-post-comments textarea  {
    background: var(--form-bg-dark);
  }
  
  /* ## Button */
  button[type="submit"],
  .bricks-button[type="submit"],
  .bricks-button[class*="primary"] {
    background-color: var(--btn-bg-dark) !important;
    color: var(--form-btn-text-dark)  !important;
    border: var(--form-btn-border-dark)  !important;
  }
  
  /* ### Style checkboxes to buttons */
  input[type="checkbox"] + label,
  input[type="checkbox"] + .wsf-label,
  .bricks-search-form input[type="checkbox"] + label,
  .brxe-post-comments input[type="checkbox"] + label {
    color: var(--form-text-color-dark);
    border-color: var(--form-border-color-dark);
  }
  
  /* ### Remove checkbox border and background color */
  input[type="checkbox"] + label:before, 
  .bricks-search-form input[type="checkbox"] + label:before, 
  .brxe-post-comments input[type="checkbox"] + label:before,
  input[type="checkbox"] + .wsf-label:before {
    border-color: transparent;
    background: transparent !important;
  }
  
  /* ### Remove checkbox shadow and background color */
  input[type="checkbox"]:checked + label:before,
  :where(.wsf-form) input[type="checkbox"]:checked + .wsf-label:before,
  .bricks-search-form input[type="checkbox"]:checked + label:before, 
  .brxe-post-comments input[type="checkbox"]:checked + label:before {
    background: transparent !important;
    box-shadow: none;
  }
  
  /* ### Remove border of checkbox */
  input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before,
  .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before, 
  .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before {
    border-color: transparent;
    box-shadow: none;
  }
  
  /* ### Remove checkbox checkmark */
  input[type="checkbox"]:checked + label:after, 
  .bricks-search-form input[type="checkbox"]:checked + label:after, 
  .brxe-post-comments input[type="checkbox"]:checked + label:after {
    background: none;
  }
  
  /* background color of checked items */
  input[type="checkbox"]:checked + label, 
  :where(.wsf-form) input[type="checkbox"]:checked + .wsf-label,
  .bricks-search-form input[type="checkbox"]:checked + label, 
  .brxe-post-comments input[type="checkbox"]:checked + label,
  .cs-form--light input[type="checkbox"]:hover + label:hover, 
  :where(.wsf-form) input[type="checkbox"]:hover + .wsf-label:hover,
  .bricks-search-form input[type="checkbox"]:hover + label:hover, 
  .brxe-post-comments input[type="checkbox"]:hover + label:hover {
    background: var(--form-bg-dark) !important;
    color: var(--form-text-color-dark) !important;
  }
}