@import (reference) "../variables/neptune-tokens.less";
@import (reference) "./mixins/_logical-properties.less";

.tw-chevron {
  display: inline-block;
  transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;

  &.top {
    transform: rotate(0deg);
  }

  &.right {
    .rotate(90deg);
  }

  &.right-sigle-direction {
    transform: rotate(+90deg) !important;
  }

  &.bottom {
    transform: rotate(180deg);
  }

  &.left {
    .rotate(270deg);
  }

  &.left-single-direction {
    transform: rotate(270deg) !important;
  }
}

.chevron-color {
  color: var(--color-content-accent);

  .np-theme-personal & {
    color: var(--color-interactive-primary);
  }
}