/* Button - Outline Style
--------------------------------------------- */

.wp-block-button.is-style-outline .wp-block-button__link {
  border: none;
  background-color: transparent;
  color: var(--wp--preset--color--contrast-2);
  outline: 2px solid var(--wp--preset--color--borderline) !important;
  outline-offset: 1px;
  transition: all 0.3s ease-in-out !important;
}

@media (max-width: 767px) {
  .wp-block-button.is-style-outline .wp-block-button__link {
    max-width: calc(100% - 4px) !important;
  }
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: color-mix(
    in srgb,
    var(--wp--preset--color--accent) 10%,
    white
  );
  color: var(--wp--preset--color--accent);
  outline-color: color-mix(
    in srgb,
    var(--wp--preset--color--accent) 10%,
    white
  );
}

/* Button - Accent Outline Style
--------------------------------------------- */

.wp-block-button.is-style-accent-outline .wp-block-button__link {
  border: none;
  background-color: transparent;
  color: var(--wp--preset--color--accent);
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: -2.5px;
  transition: all 0.3s ease-in-out !important;
}

@media (max-width: 767px) {
  .wp-block-button.is-style-accent-outline .wp-block-button__link {
    max-width: calc(100% - 4px) !important;
  }
}

.wp-block-button.is-style-accent-outline .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  outline-color: var(--wp--preset--color--accent);
}

/* Button - Contrast Outline Style
--------------------------------------------- */

.wp-block-button.is-style-contrast-outline .wp-block-button__link {
  border: none;
  background-color: transparent;
  color: var(--wp--preset--color--contrast);
  outline: 2px solid var(--wp--preset--color--contrast);
  outline-offset: -2.5px;
  transition: all 0.3s ease-in-out !important;
}

@media (max-width: 767px) {
  .wp-block-button.is-style-contrast-outline .wp-block-button__link {
    max-width: calc(100% - 4px) !important;
  }
}

.wp-block-button.is-style-contrast-outline .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  outline-color: var(--wp--preset--color--contrast);
}

/* Button - Secondary Style
--------------------------------------------- */

.is-style-secondary-button .wp-element-button,
.wp-block.is-style-secondary-button .wp-element-button {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, white);
  color: var(--wp--preset--color--accent);
}

.is-style-secondary-button:hover .wp-element-button,
.wp-block.is-style-secondary-button:hover .wp-element-button {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
}

/* Button - Tertiary Style
--------------------------------------------- */

.is-style-tertiary-button .wp-element-button,
.wp-block.is-style-tertiary-button .wp-element-button {
  background: var(--wp--preset--color--base-2);
  color: var(--wp--preset--color--contrast);
}

.is-style-tertiary-button:hover .wp-element-button,
.wp-block.is-style-tertiary-button:hover .wp-element-button {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, white);
  color: var(--wp--preset--color--accent);
}

/* Button - Ghost Style
--------------------------------------------- */

.is-style-ghost-button .wp-element-button,
.wp-block.is-style-ghost-button .wp-element-button {
  background: none;
  color: var(--wp--preset--color--contrast);
  padding-left: 0px;
}

.is-style-ghost-button:hover .wp-element-button,
.wp-block.is-style-ghost-button:hover .wp-element-button {
  background: none;
  color: var(--wp--preset--color--accent);
  padding-left: 0px;
}

/* Button - Ghost Arrow Style
--------------------------------------------- */

/* CSS */
.wp-block-button.is-style-ghost-arrow-button .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 10px;
  color: var(--wp--preset--color--contrast);
  background: none;
  transition: color 0.3s ease, border-color 0.3s ease;
  position: relative;
  padding-left: 0px;
}

.wp-block-button.is-style-ghost-arrow-button .wp-block-button__link::after {
  content: "";
  display: inline-block;
  width: var(--wp--preset--font-size--medium);
  height: var(--wp--preset--font-size--medium);
  margin-top: 2px;
  margin-left: 8px;
  background-color: currentColor;
  -webkit-mask-image: url("../icons/arrow-right-bold.svg");
  mask-image: url("../icons/arrow-right-bold.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  transition: transform 0.3s ease;
  position: relative;
}

.wp-block-button.is-style-ghost-arrow-button
  .wp-block-button__link:hover::after {
  transform: translateX(5px);
}

.wp-block-button.is-style-ghost-arrow-button .wp-block-button__link:hover {
  color: var(--wp--preset--color--accent);
}

/********** Dark Button Styling **********/

/* Button - Primary Dark Style
--------------------------------------------- */

.is-style-primary-dark-button .wp-element-button,
.wp-block.is-style-primary-dark-button .wp-element-button {
  background: var(--wp--preset--color--base);
}

.is-style-primary-dark-button:hover .wp-element-button,
.wp-block.is-style-primary-dark-button:hover .wp-element-button {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
}

/* Button - Secondary Dark Style
--------------------------------------------- */

.is-style-secondary-dark-button .wp-element-button,
.wp-block.is-style-secondary-dark-button .wp-element-button {
  background: var(--wp--preset--color--contrast-2);
  color: var(--wp--preset--color--base);
}

.is-style-secondary-dark-button:hover .wp-element-button,
.wp-block.is-style-secondary-dark-button:hover .wp-element-button {
  background: var(--wp--preset--color--contrast-3);
}

/* Button - Outline Dark Style
--------------------------------------------- */

.wp-block-button.is-style-outline-dark-button .wp-block-button__link {
  border: none;
  background-color: transparent;
  color: var(--wp--preset--color--base);
  outline: 2px solid var(--wp--preset--color--base);
  outline-offset: -2.5px;
  margin-left: 2px;
}

@media (max-width: 768px) {
  .wp-block-button.is-style-outline-dark-buttonn .wp-block-button__link {
    max-width: calc(100% - 4px) !important;
  }
}

.wp-block-button.is-style-outline-dark-button .wp-block-button__link:hover {
  background-color: color-mix(
    in srgb,
    var(--wp--preset--color--accent) 10%,
    white
  );
  color: var(--wp--preset--color--accent);
  outline-color: color-mix(
    in srgb,
    var(--wp--preset--color--accent) 10%,
    white
  );
}

/* Button - Ghost Dark Style
--------------------------------------------- */

.is-style-ghost-dark-button .wp-element-button,
.wp-block.is-style-ghost-dark-button .wp-element-button {
  background: none;
  color: var(--wp--preset--color--base);
  padding-left: 0px;
}

.is-style-ghost-dark-button:hover .wp-element-button,
.wp-block.is-style-ghost-dark-button:hover .wp-element-button {
  background: none;
  color: var(--wp--preset--color--accent);
  padding-left: 0px;
}

/* Button - Ghost Arrow Dark Style
--------------------------------------------- */

/* CSS */
.wp-block-button.is-style-ghost-dark-arrow-button .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  color: var(--wp--preset--color--base);
  background: none;
  transition: color 0.3s ease, border-color 0.3s ease;
  position: relative;
  padding-left: 0px;
}

.wp-block-button.is-style-ghost-dark-arrow-button
  .wp-block-button__link::after {
  content: "";
  display: inline-block;
  margin-top: 2px;
  width: var(--wp--preset--font-size--medium);
  height: var(--wp--preset--font-size--medium);
  margin-left: 8px;
  background-color: currentColor;
  -webkit-mask-image: url("../icons/arrow-right-bold.svg");
  mask-image: url("../icons/arrow-right-bold.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  transition: transform 0.3s ease;
  position: relative;
}

.wp-block-button.is-style-ghost-dark-arrow-button
  .wp-block-button__link:hover::after {
  transform: translateX(5px);
}

.wp-block-button.is-style-ghost-dark-arrow-button .wp-block-button__link:hover {
  color: var(--wp--preset--color--accent);
}