@import "@pluginjs/styles/variables.scss";

// Vars
// =====================
$arrow: "pj-arrow" !default;

.#{$arrow}s {
  @include clearfix();

  position: relative;
  opacity: 1;

  &.#{$arrow}-hidden {
    opacity: 0;
  }
}

.#{$arrow} {
  position: relative;
  box-sizing: content-box;
  display: inline-block;
  min-width: 1em;
  height: 1em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;

  &-icon {
    position: relative;
    display: inline-block;
    line-height: 1;
    text-align: center;
  }

  &-disabled {
    cursor: not-allowed;
  }
}

.#{$arrow}s-vertical {
  .#{$arrow}-prev,
  .#{$arrow}-next {
    display: block;
  }
}