/* ---- Buttons ---- */

/* Default styles */
.is-style-fill {
  .wp-element-button:not(.has-background) {
    &:hover,
    &:focus,
    &:active {
      background-color: var(--wp--preset--color--secondary);
    }
  }
}

.is-style-fill,
.mxs-card.mxs-dark-bg .is-style-fill {
  .wp-element-button:not(.has-text-color) {
    color: var(--almost-black);

    &:hover,
    &:focus,
    &:active {
      color: #000000;
    }
  }
}

.is-style-outline {
  > .wp-element-button:not(.has-background) {
    &:hover,
    &:focus,
    &:active {
      background-color: var(--wp--preset--color--secondary);
      background-image: var(--white-to-black-gradient);
    }
  }
}

/* Disappearing button style */
:root .is-style-disappearing {
  :where(.wp-element-button, .wp-element-button) {
    background-image: none;
    background-color: transparent;
    border-color: transparent !important;
    border-width: 1px;
  }
}

.is-style-disappearing a.wp-element-button {
  &:hover,
  &:focus,
  &:active {
    background-color: transparent;
  }
}

/* Flat button style */
.is-style-flat {
  .wp-element-button {
    background: linear-gradient(135deg, rgb(255 255 255 / 0.25) 0%, rgb(255 255 255 / 0) 100%);
    background-color: var(--wp--preset--color--primary);
    border: none;

    &:hover,
    &:focus {
      background-color: color-mix(in srgb, var(--wp--preset--color--primary), #000000 33%);
    }
  }

  .wp-element-button:not(.has-text-color) {
    color: var(--wp--preset--color--contrast) !important;
  }
}

/* Contrast colors */
.is-style-fill {
  .mxs-card.mxs-light-bg & {
    .wp-element-button:not(.has-text-color) {
      border-color: var(--wp--preset--color--primary-semitransparent);
    }
  }
}

.is-style-outline {
  .mxs-dark-theme-bg &,
  .mxs-light-theme-bg .mxs-dark-bg & {
    .wp-element-button:not(.has-text-color) {
      border-color: var(--white-50pcnt);
    }
  }

  .mxs-dark-theme-bg &,
  .mxs-light-theme-bg .mxs-dark-bg &,
  .mxs-light-theme-bg &,
  .mxs-dark-theme-bg .mxs-light-bg & {
    .wp-element-button:not(.has-text-color) {
      &:hover,
      &:focus,
      &:active {
        color: #000000 !important;
      }
    }
  }

  .mxs-card.mxs-light-bg & {
    .wp-element-button:not(.has-text-color) {
      border-color: var(--wp--preset--color--primary-semitransparent);
    }
  }
}

.is-style-disappearing {
  .wp-element-button:not(.has-text-color) {
    .mxs-dark-theme-bg &,
    .mxs-card.mxs-dark-bg & {
      &:hover,
      &:focus {
        border-color: var(--white-50pcnt) !important;
      }
    }

    .mxs-card.mxs-light-bg & {
      &:hover,
      &:focus {
        border-color: var(--wp--preset--color--primary-semitransparent) !important;
      }
    }

    .mxs-light-theme-bg & {
      &:hover,
      &:focus {
        border-color: var(--black-50pcnt) !important;
      }
    }
  }
}

/* Button block overrides for colors and gradients */
.wp-block-button:not(.is-style-fill):not(.is-style-flat):not(.is-style-outline) .wp-element-button {
  background-color: transparent !important;
}

.wp-block-button.is-style-outline .wp-element-button.has-background {
  background-color: transparent !important;
  background-image: none !important;
}

.is-style-outline .wp-element-button.has-background:hover,
.is-style-outline .wp-element-button.has-background:focus {
  background-image: var(--white-to-black-gradient) !important;
}

/* Button block color overrides */

// Use @each map to loop over each button color

$buttonColorsDefault: (
  "Blue": "accent-1",
  "Purple": "accent-2",
  "Magenta": "accent-3",
  "Orange": "accent-4",
  "Yellow": "accent-5",
  "Khaki": "accent-6",
  "Tan": "accent-7",
  "Sandstone": "accent-8",
);

@each $title, $colorValue in $buttonColorsDefault {
  /* Accent Color- #{$title} */

  .is-style-outline .wp-element-button.has-#{$colorValue}-background-color:hover,
  .is-style-outline .wp-element-button.has-#{$colorValue}-background-color:focus {
    background-color: var(--wp--preset--color--#{$colorValue}) !important;
  }

  .is-style-disappearing .wp-element-button.has-#{$colorValue}-color:hover,
  .is-style-disappearing .wp-element-button.has-#{$colorValue}-color:focus {
    border-color: var(--wp--preset--color--#{$colorValue});
  }

  .is-style-flat .wp-element-button.has-#{$colorValue}-background-color:hover,
  .is-style-flat .wp-element-button.has-#{$colorValue}-background-color:focus {
    background-color: color-mix(in srgb, var(--wp--preset--color--#{$colorValue}), #000000 33%) !important;
  }

  .is-style-outline .wp-element-button.has-#{$colorValue}-color {
    border-color: var(--wp--preset--color--#{$colorValue}) !important;
  }
}

/* Text dark */
.is-style-outline .wp-element-button.has-text-dark-background-color:hover,
.is-style-outline .wp-element-button.has-text-dark-background-color:focus {
  background-color: var(--wp--preset--color--text-dark) !important;
}

.is-style-outline .wp-element-button:not(.has-text-color).has-text-dark-background-color:hover,
.is-style-outline .wp-element-button:not(.has-text-color).has-text-dark-background-color:focus {
  border-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--white);
}

.mxs-light-bg .is-style-outline .wp-element-button:not(.has-text-color).has-text-dark-background-color:hover,
.mxs-light-bg .is-style-outline .wp-element-button:not(.has-text-color).has-text-dark-background-color:focus {
  border-color: var(--wp--preset--color--primary-semitransparent);
}

/* Text light */
.is-style-outline .wp-element-button.has-text-light-background-color:hover,
.is-style-outline .wp-element-button.has-text-light-background-color:focus {
  background-color: var(--wp--preset--color--text-light) !important;
}

/* --- Button block gradient overrides --- */

/* Navigation color titles refer to the standard color scheme
 * defined in theme.json
 */

// Use @each map to loop over each button gradient

$buttonGradientsDefault: (
  "Blue": "translucent-1",
  "Purple": "translucent-2",
  "Magenta": "translucent-3",
  "Deep Orange": "translucent-4",
  "Yellow": "translucent-5",
  "Khaki": "translucent-6",
  "Tan": "translucent-7",
  "Sandstone": "translucent-8",
);

@each $title, $gradientValue in $buttonGradientsDefault {
  /* #{$title} (translucent) */

  .is-style-outline .wp-element-button.has-#{$gradientValue}-gradient-background:hover,
  .is-style-outline .wp-element-button.has-#{$gradientValue}-gradient-background:focus {
    background-image: var(--wp--preset--gradient--#{$gradientValue}) !important;
  }

  .is-style-outline .wp-element-button:not(.has-text-color).has-#{$gradientValue}-gradient-background:hover,
  .is-style-outline .wp-element-button:not(.has-text-color).has-#{$gradientValue}-gradient-background:focus {
    border-color: var(--wp--preset--color--contrast);

    .mxs-light-bg & {
      border-color: var(--wp--preset--color--primary-semitransparent);
    }
  }
}
