.wp-block-button {
  .wp-element-button {
    border-radius: 200px;
    cursor: pointer;

    display: flex;
    justify-content: start;
    align-items: center;
    gap: 6px;

    transition: background-color 150ms ease-in-out, 
                border-color 150ms ease-in-out;
  
    &:hover {
      background-color: #9BD2AF;
      border-color: #9BD2AF;
    }

    &:focus {
      outline: 1px solid #9D9D9C;
    }
  }

  &.is-style-external .wp-element-button {
    &::after {
      content: '';
      display: inline-block;
      width: 10px;
      height: 10px;
      background-image: url("data:image/svg+xml;utf8,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8 5.5V8.5C8 8.76522 7.89464 9.01957 7.70711 9.20711C7.51957 9.39464 7.26522 9.5 7 9.5H1.5C1.23478 9.5 0.98043 9.39464 0.792893 9.20711C0.605357 9.01957 0.5 8.76522 0.5 8.5V3C0.5 2.73478 0.605357 2.48043 0.792893 2.29289C0.98043 2.10536 1.23478 2 1.5 2H4.5M6.5 0.5H9.5M9.5 0.5V3.5M9.5 0.5L4 6' stroke='%23353535' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
      background-repeat: no-repeat;
      background-size: contain;
      vertical-align: middle;
    }
  }

  &.is-style-back .wp-element-button {
    &::before {
      content: '';
      display: inline-block;
      width: 9px;
      height: 8px;
      background-image: url("data:image/svg+xml;utf8,<svg width='9' height='8' viewBox='0 0 9 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4H8M8 4L4.5 0.5M8 4L4.5 7.5' stroke='%23353535' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
      background-repeat: no-repeat;
      background-size: contain;
      vertical-align: middle;
      transform: rotate(180deg);
    }
  }

  /* Default */
  &:not(.is-style-external):not(.is-style-back) .wp-element-button {
    &::after {
      content: '';
      display: inline-block;
      width: 9px;
      height: 8px;
      background-image: url("data:image/svg+xml;utf8,<svg width='9' height='8' viewBox='0 0 9 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4H8M8 4L4.5 0.5M8 4L4.5 7.5' stroke='%23353535' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
      background-repeat: no-repeat;
      background-size: contain;
      vertical-align: middle;
    }
  }
}

.has-custom-sort-90-main-background-color {
  .wp-block-button {
    .wp-element-button {
      color: #F2F2F2;
      border-color: #9D9D9C;

      &::after {
        filter: brightness(0) invert(1);
      }

      &:hover {
        color: #353535;
        border-color: #9BD2AF;

        &::after {
          filter: brightness(0) invert(0);
        }
      }
    }
  }
}