// toggle button styles based on https://codepen.io/mallendeo/pen/eLIiG
.wc-togglebutton {
  &.wc_ro,
  > button {
    @include border;
    background-color: $wc-clr-highlight-bg;

    &::after {
      @include border;
      background-color: $wc-clr-highlight-bg;
    }
  }

  &.wc_ro {
    background-color: $wc-clr-global-bg;
  }

  > button {
    // invite ???
    &:focus {
      background-color: $wc-clr-invite-bg;
    }

    &[aria-checked='true'] {
      background-color: $wc-clr-togglebutton-selected;
    }

    &[disabled] {
      background-color: $wc-clr-disabled-bg;
    }

  }
}
