.yc-trigger {
  position: fixed;
  .yc-trigger-arrow {
    position: absolute;
    transform: rotate(45deg);
    width: 8px;
    height: 8px;
  }
}

.yc-trigger-absolute {
  position: absolute;
}

// arrow
.yc-trigger {
  &.yc-trigger-position-top,
  &.yc-trigger-position-tl,
  &.yc-trigger-position-tr {
    .yc-trigger-arrow {
      border-bottom-right-radius: 2px;
      border-top: none;
      border-left: none;
    }
  }
  &.yc-trigger-position-bottom,
  &.yc-trigger-position-bl,
  &.yc-trigger-position-br {
    .yc-trigger-arrow {
      border-top-left-radius: 2px;
      border-bottom: none;
      border-right: none;
    }
  }
  &.yc-trigger-position-left,
  &.yc-trigger-position-lt,
  &.yc-trigger-position-lb {
    .yc-trigger-arrow {
      border-top-right-radius: 2px;
      border-bottom: none;
      border-left: none;
    }
  }
  &.yc-trigger-position-right,
  &.yc-trigger-position-rt,
  &.yc-trigger-position-rb {
    .yc-trigger-arrow {
      border-bottom-left-radius: 2px;
      border-top: none;
      border-right: none;
    }
  }
}
// transform-origin
@positions: {
  top: 50% 100%;
  tl: 0 100%;
  tr: 100% 100%;
  bottom: 50% 0;
  bl: 0 0;
  br: 100% 0;
  right: 0 50%;
  rt: 0 50%;
  rb: 0 100%;
  left: 100% 50%;
  lt: 100% 0;
  lb: 100% 100%;
};
.yc-trigger-transform-origin {
  each(@positions, .(@origin, @position) {
    &.yc-trigger-position-@{position} {
      .yc-trigger-content {
        transform-origin: @origin;
      }
    }
  });
}
