:root {
  /** Button Padding Sizes */
  --btn-pad-sm: 5px 15px;
  --btn-pad: 10px 25px;
  --btn-pad-lg: 15px 30px;

  --btn-padx-sm: 15px;
  --btn-padx: 25px;
  --btn-padx-lg: 30px;

  /** Button Fixed Heights */
  --btn-h-sm: 45px;
  --btn-h: 50px;
  --btn-h-lg: 68px;

  /** Button Border */
  --btn-b-width: 4px;

  /** Border Radiuses */
  --btn-pill-full: 9999rem;
}

.basicbtn__wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.basicbtn__wrapper > * {
  cursor: pointer;
}

.default__btn_pill {
  /* If Padding active: */
  /* padding: var(--btn-pad); */

  /* If Fixed Height */
  height: var(--btn-h-lg);
  padding-inline: var(--btn-padx);

  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999rem;
  font-weight: 800;
}

.btn__wrapper.outline__wrapper .default__btn_pill.btn__prime_outline {
  padding: 30px;
  transition: 0.3s all ease;
}

.btn__wrapper.outline__wrapper:hover .default__btn_pill.btn__prime_outline {
  background: var(--cDef);
  color: var(--cWhite);
}

.btn__wrapper.outline__wrapper .arrow__pill {
  height: var(--btn-h-lg);
  min-width: var(--btn-h-lg);
}

/* Button fixes for menu */
body
  :is(
    .btn__prime,
    .outline__wrapper .arrow__pill,
    .prime__wrapper:hover .arrow__pill
  ) {
  border: var(--btn-b-width) solid var(--cDef);
  background: var(--cDef);
  color: var(--cWhite);
}

#navOverlayContainer .prime__wrapper:hover .arrow__pill {
  background: var(--cDef);
}

#navOverlayContainer .footerBtn .prime__wrapper:hover .arrow__pill {
  background: #262626;
}

div.openOverlay .outline__wrapper .arrow__pill {
  border: var(--btn-b-width) solid var(--cDef) !important;
  background: var(--cDef) !important;
}
#navOverlayContainer
  :is(
    .btn__prime,
    .outline__wrapper .arrow__pill,
    .prime__wrapper:hover .arrow__pill
  ) {
  border: none;
  background: transparent;
  color: var(--cDef);
  /* border-color: var(--cDef) !important; */
}

.overlayNav .prime__wrapper:hover .arrow__pill svg * {
  fill: var(--cDef);
}

.overlayNav .prime__wrapper:hover .arrow__pill {
  border: var(--btn-b-width) solid var(--cDef) !important;
}

.outline__wrapper:hover .arrow__pill,
#navOverlayContainer .outline__wrapper:hover .arrow__pill {
  border: var(--btn-b-width) solid var(--cDef) !important;
  background: var(--cWhite) !important;
}

.outline__wrapper .arrow__pill svg *,
#navOverlayContainer .outline__wrapper .arrow__pill svg * {
  fill: var(--cWhite) !important;
}

.outline__wrapper:hover .arrow__pill svg *,
#navOverlayContainer .outline__wrapper:hover .arrow__pill svg * {
  fill: var(--cDef) !important;
}

.arrow__pill svg {
  height: calc(var(--btn-h-sm) / 1.6);
  width: calc(var(--btn-h-sm) / 1.9);
}

.prime__wrapper .arrow__pill svg * {
  fill: var(--cDef);
}
.outline__wrapper:hover .arrow__pill svg * {
  fill: var(--cWhite);
}

.outline__wrapper .arrow__pill svg *,
.prime__wrapper:hover .arrow__pill svg * {
  fill: var(--cWhite);
}

.btn__prime_outline,
.prime__wrapper .arrow__pill,
.outline__wrapper:hover .arrow__pill {
  border: var(--btn-b-width) solid var(--cDef);
  background: var(--cWhite);
  color: var(--cDef);
}

@media (max-width: 576px) {
  .btn__prime_outline,
  .prime__wrapper .arrow__pill,
  .outline__wrapper:hover .arrow__pill {
    border: 3px solid var(--cDef);
  }
}

.btn__wrapper {
  display: flex;
  align-items: center;
}

.arrow__pill {
  height: var(--btn-h-lg);
  min-width: var(--btn-h-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999rem;
}

.btn__wrapper .arrow__pill,
.icon__wrapper .arrow__pill,
.btn__arrow {
  transition: 0.2s ease-out;
}
.btn__wrapper:hover .arrow__pill {
  transform: translateX(10px) rotate(45deg);
}

.icon__wrapper:hover .arrow__pill,
.btn__arrow:hover {
  transform: rotate(45deg);
}

@media (max-width: 1440px) {
  .default__btn_pill {
    font-size: 18px;
  }
}