@import '../styles/_variables.scss';

$tip-vertical-pos: -9px;
$tip-horizontal-pos: -8px;

:global {
  .options-wrapper__option {
    position: relative;
  }
}

.tip-relative-top.tip-relative-top.tip-relative-top {
  border: 1px solid $duda-gray;
  border-inline-start-color: transparent;
  border-block-end-color: transparent;
  top: $tip-vertical-pos;
  z-index: auto;
}
.tip-relative-bottom.tip-relative-bottom.tip-relative-bottom {
  border: 1px solid $duda-gray;
  border-inline-end-color: transparent;
  border-block-start-color: transparent;
  top: calc(100% - 9px);
  z-index: auto;
}
.tip-relative-right.tip-relative-right.tip-relative-right {
  border-inline-start-color: transparent;
  border-block-start-color: transparent;
  border-inline-end-color: $duda-gray;
  border-block-end-color: $duda-gray;
  right: $tip-horizontal-pos;
  top: 6px;
  z-index: auto;
}
.tip-relative-left.tip-relative-left.tip-relative-left {
  border-inline-end-color: transparent;
  border-block-end-color: transparent;
  border-inline-start-color: $duda-gray;
  border-block-start-color: $duda-gray;
  left: $tip-horizontal-pos;
  top: 6px;
  z-index: auto;
}