:root {
  --_well-gym-editor-color-black: #000;
  --_well-gym-editor-color-white: #fff;
  --_well-gym-editor-color-purple: #65308B;
  --_well-gym-editor-color-light-tan: #e8dedb;
  --_well-gym-editor-color-purple-bright: #9D2BDC;
  --_well-gym-editor-color-peach: #FFC7B6;

  --_well-gym-editor-transition-speed-fast: 0.15s;
  --_well-gym-editor-transition-speed-medium: 0.35s;
  --_well-gym-editor-transition-speed-slow: 0.65s;
  --_well-gym-editor-transition-timing-ease-out-cubic: cubic-bezier(0.33,1,0.68,1);
}

/* Overwrite and custom core blocks style  */

/* Core/Buttons */
.wp-block-buttons {
  column-gap: 0.625rem;
  display: flex!important;
  row-gap: 0.9375rem;
  margin-block-start: 1.75rem;
  padding-block-end: 0.125rem;
}

/* Core/Button */
.wp-block-button {
  /* Common for all buttons */
  .wp-block-button__link {
    font-family: "Figtree - local", sans-serif;
    font-size: 0.625rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.15em;
    text-decoration: none;
    text-transform: uppercase;
    text-wrap: nowrap;
    padding-top: 0.9375rem;
    padding-right: 1.4375rem;
    padding-bottom: 0.9375rem;
    padding-left: 1.4375rem;
    color: var(--_well-gym-editor-color-black);
    box-shadow: inset 1px 1px 6px 0 rgba(from var(--_well-gym-editor-color-white) r g b / 0.7);
    background-color: var(--_well-gym-editor-color-purple);
    color: var(--_well-gym-editor-color-white);
    transition-duration: var(--_well-gym-editor-transition-speed-fast);

    &:hover,
    &:focus-visible {
      color: var(--_well-gym-editor-color-white);
      background-color: var(--_well-gym-editor-color-purple-bright);
    }

    @media (max-width: 479px) {
      padding-top: 0.6875rem;
      padding-right: 1.25rem;
      padding-bottom: 0.6875rem;
      padding-left: 1.25rem;
    }
  }

  /* Style: Purple */
  &.is-style-purple {
    > .wp-block-button__link {
      box-shadow: inset 1px 1px 6px 0 rgba(from var(--_well-gym-editor-color-white) r g b / 0.7);
      background-color: var(--_well-gym-editor-color-purple);
      color: var(--_well-gym-editor-color-white);
      transition-duration: var(--_well-gym-editor-transition-speed-fast);

      &:hover,
      &:focus-visible {
        background-color: var(--_well-gym-editor-color-purple-bright);
      }
    }
  }

  /* Style: Light tan */
  &.is-style-light-tan {
    > .wp-block-button__link {
      background-color: var(--_well-gym-editor-color-light-tan);
      color: var(--_well-gym-editor-color-black);
      transition-duration: var(--_well-gym-editor-transition-speed-fast);

      &:hover,
      &:focus-visible {
        background-color: var(--_well-gym-editor-color-peach);
      }
    }
  }
}