// toggle button styles based on https://codepen.io/mallendeo/pen/eLIiG
@import 'mixins/common';

// calculated vars
$wc-togglebutton-double-border-width: 2 * $wc-border-width;
$wc-togglebutton-slider-width: $wc-togglebutton-width / 2;

.wc-togglebutton {
  &.wc_ro,
  > button {
    border-radius: $wc-togglebutton-slider-width;
    display: inline-block;
    height: $wc-togglebutton-slider-width;
    position: relative;
    width: $wc-togglebutton-width;

    &::after {
      border-radius: $wc-togglebutton-slider-width;
      content: '';
      display: block;
      height: calc(100% - #{$wc-togglebutton-double-border-width});
      left: 0;
      position: relative;
      width: 50%;
    }
  }

  > button {
    outline: 0;
    padding: 0;
    user-select: none;

    @if ($wc-togglebutton-transition != -1) {
      transition: $wc-togglebutton-transition;

      &::after {
        transition: $wc-togglebutton-transition-slider;
      }
    }
  }

  &.wc_ro_sel,
  > [aria-checked='true'] {
    &::after {
      left: calc(50% - #{$wc-togglebutton-double-border-width});
    }
  }
}

@import 'wc.togglebutton.color';
