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

// Vars
// =====================
$arrow: "pj-arrow";
$arrow-font-family: $font-family-base;

$arrow-spacer-lg: 13px;
$arrow-spacer: 11px;
$arrow-spacer-sm: 9px;

$arrow-font-size-lg: 20px;
$arrow-font-size: 16px;
$arrow-font-size-sm: 12px;

$arrow-color: rgba($color-black, 0.8);
$arrow-hover-color: $color-primary;
$arrow-active-color: $color-primary-dark;

$arrow-border-color: rgba($color-black, 0.2);
$arrow-radius: $border-radius-base;

$arrow-solid-color: $color-white;
$arrow-solid-bg: rgba($color-black, 0.3);

$arrow-shadow-bg: $color-white;
$arrow-shadow: $box-shadow-4;

$arrow-disable-color: rgba($color-black, 0.15);
$arrow-disable-border-color: rgba($color-black, 0.1);
$arrow-disable-bg: rgba($color-black, 0.15);

//light
$arrow-light-color: rgba($color-white, 0.8);
$arrow-light-hover-color: $color-primary;
$arrow-light-active-color: $color-primary-dark;

$arrow-light-border-color: rgba($color-white, 0.2);

$arrow-light-solid-color: $color-white;
$arrow-light-solid-bg: rgba($color-white, 0.3);

$arrow-light-shadow-bg: $gray-darkest;

$arrow-light-disable-color: rgba($color-white, 0.4);
$arrow-light-disable-border-color: rgba($color-white, 0.1);
$arrow-light-disable-bg: rgba($color-white, 0.1);

.#{$arrow} {
  padding: $arrow-spacer;
  font-size: $arrow-font-size;
  color: $arrow-color;
  border: 1px solid transparent;
  border-radius: $arrow-radius;
  outline: none;

  &-lg {
    padding: $arrow-spacer-lg;
    font-size: $arrow-font-size-lg;
  }

  &-sm {
    padding: $arrow-spacer-sm;
    font-size: $arrow-font-size-sm;
  }

  &-circle {
    border-radius: 50%;
  }

  &:hover {
    color: $arrow-hover-color;
  }

  &:active {
    color: $arrow-active-color;
  }

  &.#{$arrow}-disabled {
    color: $arrow-disable-color;
  }

  &-outline {
    border: 1px solid $arrow-border-color;

    &:hover {
      border-color: $arrow-hover-color;
    }

    &:active {
      border-color: $arrow-active-color;
    }

    &.#{$arrow}-disabled {
      color: $arrow-disable-color !important;
      border-color: $arrow-disable-border-color !important;
    }
  }

  &-solid {
    color: $arrow-solid-color;
    background-color: $arrow-solid-bg;

    &:hover {
      color: $arrow-solid-color;
      background-color: $arrow-hover-color;
    }

    &:active {
      color: $arrow-solid-color;
      background-color: $arrow-active-color;
    }

    &.#{$arrow}-disabled {
      color: $arrow-solid-color !important;
      background-color: $arrow-disable-bg !important;
    }
  }

  &-shadow {
    background-color: $arrow-shadow-bg;
    box-shadow: $arrow-shadow;
  }
}

.#{$arrow}s--light {
  .#{$arrow} {
    color: $arrow-light-color;

    &:hover {
      color: $arrow-light-hover-color;
    }

    &:active {
      color: $arrow-light-active-color;
    }

    &.#{$arrow}-disabled {
      color: $arrow-light-disable-color;
    }

    &-outline {
      border-color: $arrow-light-border-color;

      &:hover {
        border-color: $arrow-light-hover-color;
      }

      &:active {
        border-color: $arrow-light-active-color;
      }

      &.#{$arrow}-disabled {
        color: $arrow-light-disable-color !important;
        border-color: $arrow-light-disable-border-color !important;
      }
    }

    &-solid {
      color: $arrow-light-solid-color;
      background-color: $arrow-light-solid-bg;

      &:hover {
        color: $arrow-light-solid-color;
        background-color: $arrow-light-hover-color;
      }

      &:active {
        color: $arrow-light-solid-color;
        background-color: $arrow-light-active-color;
      }

      &.#{$arrow}-disabled {
        color: $arrow-light-solid-color !important;
        background-color: $arrow-light-disable-bg !important;
      }
    }

    &-shadow {
      background-color: $arrow-light-shadow-bg;
    }
  }
}