@use '../variables' as *;

.lume-bar {
  $b: &;
  pointer-events: visible;

  &--transition-width {
    transition: width $lume-transition-time-medium ease,
      fill $lume-transition-time-medium ease;
    -moz-transition: width $lume-transition-time-medium ease,
      fill $lume-transition-time-medium ease;

    &#{$b}--negative {
      transform: rotate(180deg);
    }
  }

  &--transition-height {
    transition: height $lume-transition-time-medium ease,
      fill $lume-transition-time-medium ease;
    -moz-transition: height $lume-transition-time-medium ease,
      fill $lume-transition-time-medium ease;

    &:not(#{$b}--negative) {
      transform: rotate(180deg);
    }
  }
}