.tn-horn-container {
  position: relative;
  & .tn-horn{
    display: none;
  }
  &.show {
    .tn-horn {
      display: block;
    }
  }
}

.tn-horn {
  position: absolute;
  z-index: 9999;
  width: $hornWidth;
  height: $hornHeight;
  border-color: $hornBorderColor;
  border-style: solid;
  border-width: 0px;
  @mixin pointer-events-none;
  &.left-top{
    left: $hornOffset;
    top: $hornOffset;
    border-left-width: $hornBorderWidth;
    border-top-width: $hornBorderWidth;
  }
  &.right-top{
    right: $hornOffset;
    top: $hornOffset;
    border-right-width: $hornBorderWidth;
    border-top-width: $hornBorderWidth;
  }
  &.left-bottom{
    left: $hornOffset;
    bottom: $hornOffset;
    border-left-width: $hornBorderWidth;
    border-bottom-width: $hornBorderWidth;
  }
  &.right-bottom{
    right: $hornOffset;
    bottom: $hornOffset;
    border-right-width: $hornBorderWidth;
    border-bottom-width: $hornBorderWidth;
  }
}