/* Base button  */
.brand-btn {
  --btn-py: 15.5px;
  --btn-px: 16px;
  --btn-gap: 10px;
  --btn-pl: 20px;
  --btn-pr: 10px;
  --btn-gap: 10px;
  --btn-radius: 100px;

  --btn-font-size: 18px;
  --btn-line-height: 20.88px;
  --btn-min-width: 162px;
  --btn-height: 52px;

  --btn-color-black: #081820;
  --btn-color-white: #ffffff;
  --btn-color-green: #bfff98;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-py) var(--btn-pr) var(--btn-py) var(--btn-pl);
  border-radius: var(--btn-radius);
  font-family: 'Denim', Sans-serif;
  font-weight: 600;
  font-size: var(--btn-font-size);
  line-height: var(--btn-line-height);
  min-width: var(--btn-min-width);
  height: var(--btn-height);
  text-decoration: none;
  position: relative;
  outline: none;
  transition: background 0.25s ease, color 0.25s ease;
}

/* Reusable arrow-in-circle */
.brand-arrow {
  --diam: 32px;

  width: var(--diam);
  height: var(--diam);
  min-width: var(--diam);
  min-height: var(--diam);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, color 0.25s ease;
}

.brand-btn--dark:hover {
  color: var(--btn-color-white);
}
.brand-btn--light:hover {
  color: var(--btn-color-black);
}
.brand-btn--green:hover {
  color: var(--btn-color-black);
}
.brand-btn--green-hover_black:hover {
  color: var(--btn-color-black);
}

@media (min-width: 1024px) {
  .brand-btn {
    --btn-py: 12.5px;
    --btn-pl: 17.69px;
    --btn-pr: 8.85px;
    --btn-gap: 15px;
    --btn-font-size: 18px;
    --btn-line-height: 20.88px;
    --btn-min-width: 158px;
    --btn-height: 46px;
  }
  .brand-arrow {
    --diam: 28.31px;
  }

  .brand-btn--dark:hover {
    background: var(--btn-color-green);
    color: var(--btn-color-black);

    .brand-arrow--green {
      background: var(--btn-color-black);
      color: var(--btn-color-white);
    }
  }
  .brand-btn--light:hover {
    background: var(--btn-color-green);
    color: var(--btn-color-black);

    .brand-arrow--green {
      background: var(--btn-color-black);
      color: var(--btn-color-white);
    }
  }

  .brand-btn--green-hover_black:hover {
    background: var(--btn-color-black);
    color: var(--btn-color-white);

    .brand-arrow--green {
      background: var(--btn-color-green);
      color: var(--btn-color-black);
    }
  }

  .brand-btn--green-hover_white:hover {
    background: var(--btn-color-white);
    color: var(--btn-color-black);

    .brand-arrow--green {
      background: var(--btn-color-green);
      color: var(--btn-color-black);
    }
  }
}

@media (min-width: 1365px) {
  .brand-arrow {
    --diam: 32px;
  }
}

@media (min-width: 1439px) {
  .brand-btn {
    --btn-py: 14.5px;
    --btn-pl: 20px;
    --btn-pr: 10px;
    --btn-font-size: 20px;
    --btn-line-height: 23.2px;
    --btn-min-width: 176px;
    --btn-height: 52px;
  }
}

.brand-btn--full {
  width: 100%;
}

/* Variants */
.brand-btn--dark {
  background: var(--btn-color-black);
  color: var(--btn-color-white);
}
.brand-btn--light {
  background: var(--btn-color-white);
  color: var(--btn-color-black);
}
.brand-btn--green {
  background: var(--btn-color-green);
  color: var(--btn-color-black);
}

.brand-btn--green-hover_black .brand-arrow--green {
  background: var(--btn-color-white);
  color: var(--btn-color-black);
}

.brand-btn--green-hover_white .brand-arrow--green {
  background: var(--btn-color-white);
  color: var(--btn-color-black);
}

.brand-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(40, 132, 255, 0.35);
}

/* Reusable arrow-in-circle extend*/
.brand-arrow__icon {
  display: block;
}

/* Variants (circle background + arrow color via currentColor) */
.brand-arrow--green {
  background: var(--btn-color-green);
  color: var(--btn-color-black);
}
.brand-arrow--green-hover_black {
  background: var(--btn-color-white);
  color: var(--btn-color-black);
}

.brand-arrow--light {
  background: var(--btn-color-white);
  color: var(--btn-color-black);
}
.brand-arrow--dark {
  background: var(--btn-color-black);
  color: var(--btn-color-white);
}

/* Spacing when arrow is inside the button */
.brand-btn--arrow-left .brand-arrow {
  margin-right: 6px;
}
/*
.brand-btn--arrow-right .brand-arrow {
   margin-left: 6px;
}
*/