:root {
  --_ksc-editor-color-black: #000;
  --_ksc-editor-color-white: #fff;
  --_ksc-editor-color-primary: #e99871;
  --_ksc-editor-color-orange: #F26622;

  --_ksc-editor-transition-speed-fast: 0.15s;
  --_ksc-editor-transition-speed-medium: 0.35s;
  --_ksc-editor-transition-speed-slow: 0.65s;
  --_ksc-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 {
    border-radius: 100vw;
    border-width: 0.0625rem;
    font-family: "DM Sans variable", sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.15em;
    text-decoration: none;
    text-transform: uppercase;
    text-wrap: nowrap;
    padding-top: 0.8125rem;
    padding-right: 1.5rem;
    padding-bottom: 0.8125rem;
    padding-left: 1.5rem;
    background-color: var(--_ksc-editor-color-primary);
    border: 0.0625rem solid var(--_ksc-editor-color-primary);
    color: var(--_ksc-editor-color-black);
    transition-duration: var(--_ksc-editor-transition-speed-fast);

    &:hover,
    &:focus-visible {
      background-color: var(--_ksc-editor-color-white);
      border-color: var(--_ksc-editor-color-primary);
      color: var(--_ksc-editor-color-black);
    }

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

  /* Style: Orange */
  &.is-style-orange {
    > .wp-block-button__link {
      background-color: var(--_ksc-editor-color-primary);
      border: 0.0625rem solid var(--_ksc-editor-color-primary);
      color: var(--_ksc-editor-color-black);
      transition-duration: var(--_ksc-editor-transition-speed-fast);

      &:hover,
      &:focus-visible {
        background-color: var(--_ksc-editor-color-white);
        border-color: var(--_ksc-editor-color-primary);
      }
    }
  }

  /* Style: Black */
  &.is-style-black {
    > .wp-block-button__link {
      background-color: var(--_ksc-editor-color-black);
      border: 0.0625rem solid var(--_ksc-editor-color-black);
      color: var(--_ksc-editor-color-white);
      transition-duration: var(--_ksc-editor-transition-speed-fast);

      &:hover,
      &:focus-visible {
        color: var(--_ksc-editor-color-black);
        background-color: var(--_ksc-editor-color-white);
        border-color: var(--_ksc-editor-color-black);
      }
    }
  }
}