.wp-block-buttons .wp-block-button {
  .wp-element-button {
    transition: all 250ms ease-in-out;
    border-width: 2px;
    border-radius: 8px;

    padding: 8px 20px;

    @media screen and ( max-width: 600px ) {
      padding: 8px 16px;
    }
  }

  &.is-style-fill-arrow,
  &.is-style-outline-arrow,
  &.is-style-disabled-arrow {
    .wp-element-button {
      position: relative;
      &::after {
        content: "";
        display: inline-block;
        margin-left: 4px;
        margin-bottom: 2px;
        width: 20px;
        height: 20px;
        background-image: url('../../img/arrow.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: middle;
        transform: rotate( -180deg );
      }
    }
  }

  &.is-style-fill-arrow .wp-element-button::after {
    background-image: url('../../img/arrow-light.svg') !important;
  }

  /* Regular */
  &:not( .is-style-disabled ):not( .is-style-outline-no-arrow ):not( .is-style-disabled-arrow ):not( .is-style-outline-arrow ) {
    .wp-element-button  {
      &:active {
        border-color:  #34B181;
        background:#154734;
      }
      
      &:focus {
        border-color: #0A231A;
        background: #0A231A;
      }
    }
  }

  /* Disabled */
  &.is-style-disabled-arrow,
  &.is-style-disabled {
    .wp-element-button {
      cursor: not-allowed;
      border: 1px solid #C6CDCB;
      background: #F1F3F3;
      color: #8D9B96;
      pointer-events: none;
    }
  }

  /* Outline */
  &.is-style-outline-arrow,
  &.is-style-outline-no-arrow {
    .wp-element-button {
      background-color: transparent;
      color: #154734;
      border-color: #154734;
      
      &:focus {
        border-color: #154734;
        background-color: #C8EFE0;
      }
      &:hover {
        border-color: #154734;
        background-color: #F5F4C6;
      }
      &:active {
        background-color: #fefdf6;
        border-color: #34B181;
      }
    }
  }
}