/* ------------------------------ */
/* Default Button
/* ------------------------------ */

.wp-block-button {
  & .wp-block-button__link {
    color: var(--wp--preset--color--neutral-true-white);
    background-color: var(--wp--preset--color--primary-darker);
    padding-top: var(--wp--custom--button--padding-top);
    padding-right: var(--wp--custom--button--padding-right);
    padding-bottom: var(--wp--custom--button--padding-bottom);
    padding-left: var(--wp--custom--button--padding-left);
    border-style: solid;
    border-radius: 0;
    border-color: var(--wp--preset--color--primary-darker);
    border-width: var(--wp--custom--button--border-width);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: var(--wp--custom--font-weight--semi-bold);
    line-height: var(--wp--custom--line-height--medium);

    &:hover,
    &:active,
    &:focus {
      color: var(--wp--preset--color--primary-darker);
      background-color: var(--wp--preset--color--neutral-true-white);
    }
  }
}

/* ------------------------------ */
/* Outline Variant
/* ------------------------------ */

.wp-block-button.is-style-outline,
.wp-block-button.is-style-outline-trailing-arrow,
.wp-block-button.is-style-outline-secondary,
.wp-block-button.is-style-outline-secondary-trailing-arrow,
.wp-block-button.is-style-outline-neutral,
.wp-block-button.is-style-outline-neutral-trailing-arrow {
  & .wp-block-button__link {
    color: var(--wp--preset--color--primary-darker);
    background-color: var(--wp--preset--color--neutral-true-white);
    border-color: var(--wp--preset--color--primary-darker);

    &:hover,
    &:active,
    &:focus {
      color: var(--wp--preset--color--neutral-true-white);
      background-color: var(--wp--preset--color--primary-darker);
    }
  }
}

/* Specific-color Outline Variants */
.wp-block-button.is-style-outline-secondary,
.wp-block-button.is-style-outline-secondary-trailing-arrow {
  & .wp-block-button__link {
    color: var(--wp--preset--color--neutral-darker);
    border-color: var(--wp--preset--color--secondary-default);

    &:hover,
    &:active,
    &:focus {
      color: var(--wp--preset--color--neutral-darker);
      background-color: var(--wp--preset--color--secondary-default);
      border-color: var(--wp--preset--color--secondary-default);
    }
  }
}
.wp-block-button.is-style-outline-neutral,
.wp-block-button.is-style-outline-neutral-trailing-arrow {
  & .wp-block-button__link {
    color: var(--wp--preset--color--neutral-darker);
    border-color: var(--wp--preset--color--neutral-darker);

    &:hover,
    &:active,
    &:focus {
      color: var(--wp--preset--color--neutral-true-white);
      background-color: var(--wp--preset--color--neutral-darker);
    }
  }
}

/* ------------------------------ */
/* Trailing Arrow Variant
/* ------------------------------ */

.wp-block-button.is-style-trailing-arrow,
.wp-block-button.is-style-outline-trailing-arrow,
.wp-block-button.is-style-simple-trailing-arrow,
.wp-block-button.is-style-outline-secondary-trailing-arrow,
.wp-block-button.is-style-outline-neutral-trailing-arrow,
.wp-block-button.is-style-bright-trailing-arrow,
.wp-block-button.is-style-back-to-top {
  & .wp-block-button__link {
    &::after {
      content: '';
      display: inline-block;
      background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-chevron-right-neutral_true_white.svg');
      width: var(--wp--custom--arrow-button--arrow-width);
      height: var(--wp--custom--arrow-button--arrow-height);
      margin-left: var(--wp--custom--arrow-button--arrow-gap);
    }

    &:hover,
    &:active,
    &:focus {
      &::after {
        background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-chevron-right-primary_darker.svg');
      }
    }
  }
}

/* When combining trailing arrow with light-bg variants, swap the arrow colors. */
.wp-block-button.is-style-outline-trailing-arrow,
.wp-block-button.is-style-simple-trailing-arrow {
  & .wp-block-button__link {
    &::after {
      background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-chevron-right-primary_darker.svg');
    }
    &:hover,
    &:active,
    &:focus {
      &::after {
        background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-chevron-right-neutral_true_white.svg');
      }
    }
  }
}

/* Specific-color Outline variant + Trailing Arrow: arrow matches color */
.wp-block-button.is-style-outline-secondary-trailing-arrow {
  & .wp-block-button__link {
    &::after {
      background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-chevron-right-secondary_dark.svg');
    }
    &:hover,
    &:active,
    &:focus {
      &::after {
        background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-chevron-right-neutral_true_white.svg');
      }
    }
  }
}
.wp-block-button.is-style-outline-neutral-trailing-arrow {
  & .wp-block-button__link {
    &::after {
      background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-chevron-right-neutral_darkest.svg');
    }
    &:hover,
    &:active,
    &:focus {
      &::after {
        background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-chevron-right-neutral_true_white.svg');
      }
    }
  }
}

/* Bright + Trailing Arrow: use white arrow on hover */
.wp-block-button.is-style-bright-trailing-arrow {
  & .wp-block-button__link {
    &:hover,
    &:active,
    &:focus {
      &::after {
        background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-chevron-right-neutral_true_white.svg');
      }
    }
  }
}

/* ------------------------------ */
/* Bright Variant
/* ------------------------------ */
.wp-block-button.is-style-bright,
.wp-block-button.is-style-bright-trailing-arrow {
  & .wp-block-button__link {
    background-color: var(--wp--preset--color--primary-default);
    border-color: var(--wp--preset--color--primary-default);
    &:hover,
    &:active,
    &:focus {
      color: var(--wp--preset--color--neutral-darker);
      background-color: var(--wp--preset--color--secondary-default);
      border-color: var(--wp--preset--color--secondary-default);
    }
  }
}

/* ------------------------------ */
/* Simple Variant
/* ------------------------------ */

.wp-block-button.is-style-simple,
.wp-block-button.is-style-simple-trailing-arrow,
.wp-block-button.is-style-back-to-top {
  & .wp-block-button__link {
    color: var(--wp--preset--color--primary-darker);
    background-color: transparent;
    border-color: transparent;
    padding: 0;
    position: relative;

    &::before {
      display: inline-block;
      content: '';
      position: absolute;
      z-index: -1;
      top: -0.5rem;
      right: -0.75rem;
      bottom: -0.5rem;
      left: -0.75rem;
      transition: all 0.2s ease-in-out;
    }

    &:hover,
    &:active,
    &:focus {
      &::before {
        background-color: var(--wp--preset--color--primary-lightest);
      }
      &::after {
        background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-chevron-right-primary_default.svg');
      }
    }
  }
}

/* ------------------------------ */
/* List Variant
/* ------------------------------ */

.wp-block-button {
  &.is-style-list,
  &.is-style-list-secondary,
  &.is-style-list-neutral {
    & .wp-block-button__link {
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--wp--preset--spacing--x-small);
      color: var(--wp--preset--color--neutral-darkest);
      background-color: var(--wp--preset--color--primary-lightest);
      border-color: var(--wp--preset--color--primary-lightest);

      &::after {
        content: '';
        display: inline-block;
        background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-arrow-right-primary_default.svg');
        width: var(--wp--custom--push-list-button--arrow-width);
        height: var(--wp--custom--push-list-button--arrow-height);
        margin-left: var(--wp--custom--arrow-button--arrow-gap);
      }

      &:hover,
      &:active,
      &:focus {
      background-color: var(--wp--preset--color--neutral-true-white);
      border-color: var(--wp--preset--color--primary-default);
        &::after {
          background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-arrow-right-primary_darker.svg');
        }
      }
    }
  }

  &.is-style-list-secondary .wp-block-button__link {
    background-color: var(--wp--preset--color--secondary-lightest);
    border-color: var(--wp--preset--color--secondary-lightest);
    &::after {
      background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-arrow-right-secondary_darker.svg');
    }
    &:hover,
    &:active,
    &:focus {
    border-color: var(--wp--preset--color--secondary-default);
      &::after {
        background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-arrow-right-secondary_darkest.svg');
      }
    }
  }

  &.is-style-list-neutral .wp-block-button__link {
    background-color: var(--wp--preset--color--neutral-lightest);
    border-color: var(--wp--preset--color--neutral-lightest);
    &::after {
      background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-arrow-right-neutral_darker.svg');
    }
    &:hover,
    &:active,
    &:focus {
    border-color: var(--wp--preset--color--neutral-default);
      &::after {
        background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-arrow-right-neutral_darkest.svg');
      }
    }
  }
}

/* ------------------------------ */
/* Back to Top Variant
/* Base styles come from Simple variant ^^
/* ------------------------------ */
.wp-block-button {
  &.is-style-back-to-top {
    & .wp-block-button__link {
      &::after {
        background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-arrow-up-primary_darker.svg');
        width: var(--wp--custom--push-list-button--arrow-width);
        height: var(--wp--custom--push-list-button--arrow-height);
        margin-left: var(--wp--custom--arrow-button--arrow-gap);
      }
      &:hover,
      &:active,
      &:focus {
        &::after {
          background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-arrow-up-primary_default.svg');
        }
      }
    }
  }
}

/* ----------------------------------------------------------------- */
/* Conditional Styles

/* Changes to button styles when the button is in a particular environment,
/* such as a dark background.
/* ----------------------------------------------------------------- */

/* On ANY parent with a background color... */
.has-background {
  & .wp-block-button {

    /* Simple / Back to Top Buttons:
    Remove the faux-background highlight due to the complexity of managing
    the layers/z-index with parent background.
    */
    &.is-style-simple,
    &.is-style-simple-trailing-arrow,
    &.is-style-back-to-top {
      & .wp-block-button__link {
        &::before {
          display: none;
        }
        &:hover,
        &:active,
        &:focus {
          color: var(--wp--preset--color--primary-default);
        }
      }
    }
  }
}

/* Dark Primary & Neutral */
.has-primary-default-background-color,
.has-primary-dark-background-color,
.has-primary-darker-background-color,
.has-primary-darkest-background-color,
.has-primary-background-color,
.has-neutral-dark-background-color,
.has-neutral-darker-background-color,
.has-neutral-darkest-background-color,
.has-contrast-background-color {
  & .wp-block-button {

    & .wp-block-button__link {
      color: var(--wp--preset--color--neutral-darkest);
      background-color: var(--wp--preset--color--neutral-true-white);
      border-color: var(--wp--preset--color--neutral-true-white);

      &::after {
        background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-chevron-right-secondary_dark.svg');
      }

      &:hover,
      &:active,
      &:focus {
        background-color: var(--wp--preset--color--secondary-default);
        border-color: var(--wp--preset--color--secondary-default);
        &::after {
          background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-chevron-right-neutral_true_white.svg');
        }
      }
    }

    /* On Dark: Outline Variants */
    &.is-style-outline,
    &.is-style-outline-trailing-arrow,
    &.is-style-simple,
    &.is-style-simple-trailing-arrow,
    &.is-style-outline-secondary,
    &.is-style-outline-secondary-trailing-arrow,
    &.is-style-outline-neutral,
    &.is-style-outline-neutral-trailing-arrow,
    &.is-style-back-to-top {
      & .wp-block-button__link {
        color: var(--wp--preset--color--neutral-true-white);
        background-color: inherit;
        &:hover,
        &:active,
        &:focus {
          color: var(--wp--preset--color--neutral-darkest);
          background-color: var(--wp--preset--color--secondary-default);
          border-color: var(--wp--preset--color--secondary-default);
          &::after {
            background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-chevron-right-neutral_true_white.svg');
          }
        }
      }
    }

    /* On Dark: Specific-color Outline Variants */
    &.is-style-outline-secondary,
    &.is-style-outline-secondary-trailing-arrow {
      & .wp-block-button__link {
        border-color: var(--wp--preset--color--secondary-default);
      }
    }
    &.is-style-outline-neutral,
    &.is-style-outline-neutral-trailing-arrow {
      & .wp-block-button__link {
        border-color: var(--wp--preset--color--neutral-default);
        &::after {
            background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-chevron-right-neutral_true_white.svg');
          }
        &:hover,
        &:active,
        &:focus {
          color: var(--wp--preset--color--neutral-darkest);
          background-color: var(--wp--preset--color--neutral-lighter);
          border-color: var(--wp--preset--color--neutral-lighter);
          &::after {
            background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-chevron-right-neutral_darkest.svg');
          }
        }
      }
    }

    /* On Dark: Simple & Back to Top Variants */
    &.is-style-simple,
    &.is-style-simple-trailing-arrow,
    &.is-style-back-to-top {
      & .wp-block-button__link {
        border: 0;
        &:hover,
        &:active,
        &:focus {
          background-color: transparent;
          color: var(--wp--preset--color--secondary-light);
        }
      }
    }
    &.is-style-back-to-top {
      & .wp-block-button__link {
        &::after {
          background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-arrow-up-secondary_default.svg');
        }
        &:hover,
        &:active,
        &:focus {
          &::after {
            background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-arrow-up-neutral_true_white.svg');
          }
        }
      }
    }

    /* On Dark: Bright Variants */
    &.is-style-bright,
    &.is-style-bright-trailing-arrow {
      & .wp-block-button__link {
        background-color: var(--wp--preset--color--secondary-default);
        border-color: var(--wp--preset--color--secondary-default);
        &::after {
          background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-chevron-right-neutral_true_white.svg');
        }
        &:hover,
        &:active,
        &:focus {
          color: var(--wp--preset--color--primary-darker);
          background-color: var(--wp--preset--color--neutral-true-white);
          border-color: var(--wp--preset--color--neutral-true-white);
          &::after {
            background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-chevron-right-primary_default.svg');
          }
        }
      }
    }


    /* On Dark: List Variants */
    &.is-style-list,
    &.is-style-list-secondary,
    &.is-style-list-neutral {
      & .wp-block-button__link {
        color: var(--wp--preset--color--neutral-true-white);
        background-color: rgba(225, 225, 225, 0.2);
        border-color: transparent;
        &::after {
          background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-arrow-right-secondary_light.svg');
        }
        &:hover,
        &:active,
        &:focus {
          background-color: transparent;
          border-color: var(--wp--preset--color--primary-lightest);
          &::after {
            background-image: url('/wp-content/themes/mdhumanities/assets/images/icon-arrow-right-neutral_true_white.svg');
          }
        }
      }
    }
  }
}