/*
 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
*/

.list-arrow ul {
  list-style: none;
  padding-left: 0;
}

.list-arrow ul li {
  position: relative;
  padding-left: 1.5em; /* odstęp na strzałkę */
line-height: 2.5em
}

.list-arrow ul li::before {
  content: "➜"; /* możesz też użyć np. "→" lub ikony Font Awesome */
  position: absolute;
  left: 0;
  color: inherit; /* kolor strzałki, możesz zmienić */
  font-weight: bold;
}

/* BAZA dla wszystkich .brxe-button.bricks-button */
.grid .brxe-button.bricks-button,
.brxe-button.bricks-button{
  position: relative;
  display: inline-block;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  z-index: 0;
}

/* ===== FILLED VARIANTY ===== */

/* PRIMARY → blue-dark (0.5 → slide 1.0) */
.brxe-button.bricks-button.bricks-background-primary{
  color: #fff;
  border: 2px solid var(--blue-dark-50);
}
.brxe-button.bricks-button.bricks-background-primary::after{
  content:""; position:absolute; inset:0;
  background: var(--blue-dark-50);
  z-index:-2;
}
.brxe-button.bricks-button.bricks-background-primary::before{
  content:""; position:absolute; inset:0 auto 0 0;
  width:0; height:100%;
  background: var(--blue-dark-100);
  transition: width .3s;
  z-index:-1;
}
.brxe-button.bricks-button.bricks-background-primary:hover::before,
.brxe-button.bricks-button.bricks-background-primary:focus-visible::before{ width:100%; }

/* SECONDARY → salmon */
.brxe-button.bricks-button.bricks-background-secondary{
  color:#fff;
  border: 2px solid var(--salmon-50);
}
.brxe-button.bricks-button.bricks-background-secondary::after{
  content:""; position:absolute; inset:0;
  background: var(--salmon-75);
  z-index:-2;
}
.brxe-button.bricks-button.bricks-background-secondary::before{
  content:""; position:absolute; inset:0 auto 0 0;
  width:0; height:100%;
  background: var(--salmon-100);
  transition: width .3s;
  z-index:-1;
}
.brxe-button.bricks-button.bricks-background-secondary:hover::before,
.brxe-button.bricks-button.bricks-background-secondary:focus-visible::before{ width:100%; }

/* LIGHT → mint */
.brxe-button.bricks-button.bricks-background-light{
  color:#fff;
  border: 2px solid var(--mint-50);
}
.brxe-button.bricks-button.bricks-background-light::after{
  content:""; position:absolute; inset:0;
  background: var(--mint-50);
  z-index:-2;
}
.brxe-button.bricks-button.bricks-background-light::before{
  content:""; position:absolute; inset:0 auto 0 0;
  width:0; height:100%;
  background: var(--mint-100);
  transition: width .3s;
  z-index:-1;
}
.brxe-button.bricks-button.bricks-background-light:hover::before,
.brxe-button.bricks-button.bricks-background-light:focus-visible::before{ width:100%; }

/* DARK → blue-light (jaśniejszy; czarny tekst) */
.brxe-button.bricks-button.bricks-background-dark{
  color:#000;
  border: 2px solid var(--blue-light-50);
}
.brxe-button.bricks-button.bricks-background-dark::after{
  content:""; position:absolute; inset:0;
  background: var(--blue-light-50);
  z-index:-2;
}
.brxe-button.bricks-button.bricks-background-dark::before{
  content:""; position:absolute; inset:0 auto 0 0;
  width:0; height:100%;
  background: var(--blue-light-100);
  transition: width .3s;
  z-index:-1;
}
.brxe-button.bricks-button.bricks-background-dark:hover::before,
.brxe-button.bricks-button.bricks-background-dark:focus-visible::before{ width:100%; }

/* utrzymaj kolor wnętrza */
.brxe-button.bricks-button *{ color: inherit; }

/* ===== OUTLINE VARIANTY (tło białe na starcie, slide jak wyżej) ===== */

/* PRIMARY outline → blue-dark */
.brxe-button.bricks-button.outline.bricks-color-primary{
  color: var(--blue-dark-50);
  border: 2px solid var(--blue-dark-50);
}
.brxe-button.bricks-button.outline.bricks-color-primary::after{
  content:""; position:absolute; inset:0;
  background: #fff;            /* białe tło w spoczynku */
  z-index:-2;
}
.brxe-button.bricks-button.outline.bricks-color-primary::before{
  content:""; position:absolute; inset:0 auto 0 0;
  width:0; height:100%;
  background: var(--blue-dark-100);  /* pełny kolor na hover */
  transition: width .3s;
  z-index:-1;
}
.brxe-button.bricks-button.outline.bricks-color-primary:hover::before,
.brxe-button.bricks-button.outline.bricks-color-primary:focus-visible::before{ width:100%; }
.brxe-button.bricks-button.outline.bricks-color-primary:hover,
.brxe-button.bricks-button.outline.bricks-color-primary:focus-visible{ color:#fff; }

/* SECONDARY outline → salmon */
.brxe-button.bricks-button.outline.bricks-color-secondary{
  color: var(--salmon-50);
  border: 2px solid var(--salmon-50);
}
.brxe-button.bricks-button.outline.bricks-color-secondary::after{
  content:""; position:absolute; inset:0;
  background:#fff;
  z-index:-2;
}
.brxe-button.bricks-button.outline.bricks-color-secondary::before{
  content:""; position:absolute; inset:0 auto 0 0;
  width:0; height:100%;
  background: var(--salmon-100);
  transition: width .3s;
  z-index:-1;
}
.brxe-button.bricks-button.outline.bricks-color-secondary:hover::before,
.brxe-button.bricks-button.outline.bricks-color-secondary:focus-visible::before{ width:100%; }
.brxe-button.bricks-button.outline.bricks-color-secondary:hover,
.brxe-button.bricks-button.outline.bricks-color-secondary:focus-visible{ color:#fff; }

/* LIGHT outline → mint */
.brxe-button.bricks-button.outline.bricks-color-light{
  color: var(--mint-50);
  border: 2px solid var(--mint-50);
}
.brxe-button.bricks-button.outline.bricks-color-light::after{
  content:""; position:absolute; inset:0;
  background:#fff;
  z-index:-2;
}
.brxe-button.bricks-button.outline.bricks-color-light::before{
  content:""; position:absolute; inset:0 auto 0 0;
  width:0; height:100%;
  background: var(--mint-100);
  transition: width .3s;
  z-index:-1;
}
.brxe-button.bricks-button.outline.bricks-color-light:hover::before,
.brxe-button.bricks-button.outline.bricks-color-light:focus-visible::before{ width:100%; }
.brxe-button.bricks-button.outline.bricks-color-light:hover,
.brxe-button.bricks-button.outline.bricks-color-light:focus-visible{ color:#fff; }

/* DARK outline → blue-light (tekst czarny na hover) */
.brxe-button.bricks-button.outline.bricks-color-dark{
  color: var(--blue-light-50);
  border: 2px solid var(--blue-light-50);
}
.brxe-button.bricks-button.outline.bricks-color-dark::after{
  content:""; position:absolute; inset:0;
  background:#fff;
  z-index:-2;
}
.brxe-button.bricks-button.outline.bricks-color-dark::before{
  content:""; position:absolute; inset:0 auto 0 0;
  width:0; height:100%;
  background: var(--blue-light-100);
  transition: width .3s;
  z-index:-1;
}
.brxe-button.bricks-button.outline.bricks-color-dark:hover::before,
.brxe-button.bricks-button.outline.bricks-color-dark:focus-visible::before{ width:100%; }
.brxe-button.bricks-button.outline.bricks-color-dark:hover,
.brxe-button.bricks-button.outline.bricks-color-dark:focus-visible{ color:#000; }


.brxe-button i{
  margin-left: 4px;
  margin-right: 4px;
}