/**
 * Base label styling.
 *
 * Two sources, both of which disappeared with the plugin: the parts of BeRocket's
 * css/frontend.css that our markup actually matches (the rest of that 656-line file
 * styles the 20-odd label templates we never used), and the layout block
 * better_position.php echoed inline on every page. The per-label rules - colour, size,
 * offsets - are generated from each label's own settings, see hh_labels_stylesheet().
 *
 * The position offsets below were 0 in br-products_label-options, which is what the
 * plugin emitted too.
 */

/* --- the label itself --- */
.br_alabel > span {
  padding: 0;
  font-weight: bold;
  display: inline-block;
  overflow: visible;
  text-overflow: clip;
  text-align: center;
  box-sizing: border-box;
  border: 0 solid transparent;
  position: relative;
  flex-direction: column;
  justify-content: center;
}

.br_alabel > span b { color: inherit; }

.br_alabel > span i.template-i,
.br_alabel > span i.template-span-before,
.br_alabel > span i.template-i-before,
.br_alabel > span i.template-i-after { border-width: 0; }

/* The "custom image" template paints the image on the span and hides the text. */
.br_alabel.br_alabel_template_type_image > span {
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain;
}
.br_alabel.br_alabel_template_type_image > span b { display: none; }

/* --- tooltips --- */
/* The copy ships inside the label and is lifted out on hover by labels.js. */
.br_alabel .br_tooltip { display: none; }
/* Tooltip copy is written with real newlines in the editor. */
.berocket_tooltip_text { white-space: pre-wrap; }

/* Colours and metrics match what tippy 6 rendered, so the tooltips look unchanged. */
.hh-tip {
  position: fixed;
  z-index: 100000;
  display: none;
  padding: 5px 9px;
  border-radius: 4px;
  background-color: #333;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
  box-sizing: border-box;
}
.hh-tip.is-visible { display: block; }
.hh-tip--translucent { background-color: rgba(0, 0, 0, .7); border-radius: 6px; }
.hh-tip--dark { background-color: #333; }

.hh-tip--arrow::after {
  content: "";
  position: absolute;
  border: 6px solid transparent;
}
.hh-tip--arrow[data-side="top"]::after    { top: 100%; left: 50%; margin-left: -6px; border-top-color: inherit; }
.hh-tip--arrow[data-side="bottom"]::after { bottom: 100%; left: 50%; margin-left: -6px; border-bottom-color: inherit; }
.hh-tip--arrow[data-side="left"]::after   { left: 100%; top: 50%; margin-top: -6px; border-left-color: inherit; }
.hh-tip--arrow[data-side="right"]::after  { right: 100%; top: 50%; margin-top: -6px; border-right-color: inherit; }

/* --- stacking layout (was better_position.php) --- */
.berocket_better_labels:before,
.berocket_better_labels:after {
  clear: both;
  content: " ";
  display: block;
}

.berocket_better_labels.berocket_better_labels_image {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  pointer-events: none;
}
.berocket_better_labels.berocket_better_labels_image * { pointer-events: none; }
.berocket_better_labels .berocket_better_labels_line .br_alabel,
.berocket_better_labels .berocket_better_labels_line .br_alabel span { pointer-events: all; }

.berocket_better_labels.berocket_better_labels_label { clear: both; }
.berocket_better_labels .berocket_better_labels_line { line-height: 1px; }
.berocket_better_labels.berocket_better_labels_label .berocket_better_labels_line { clear: none; }
.berocket_better_labels .berocket_better_labels_position_left .berocket_better_labels_line { clear: left; }
.berocket_better_labels .berocket_better_labels_position_right .berocket_better_labels_line { clear: right; }

.berocket_better_labels .berocket_better_labels_position_left {
  text-align: left;
  float: left;
  clear: left;
}
.berocket_better_labels .berocket_better_labels_position_right {
  text-align: right;
  float: right;
  clear: right;
}

/* The per-label rules set top/left/right; inside a stack the label flows instead. */
.berocket_better_labels .berocket_better_labels_line .br_alabel {
  display: inline-block;
  position: relative;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  line-height: 1px;
}

.berocket_better_labels .berocket_better_labels_position {
  display: flex;
  flex-direction: column;
}
.berocket_better_labels .berocket_better_labels_position.berocket_better_labels_position_left { align-items: start; }
.berocket_better_labels .berocket_better_labels_position.berocket_better_labels_position_right { align-items: end; }
.rtl .berocket_better_labels .berocket_better_labels_position.berocket_better_labels_position_left { align-items: end; }
.rtl .berocket_better_labels .berocket_better_labels_position.berocket_better_labels_position_right { align-items: start; }
.berocket_better_labels .berocket_better_labels_position .berocket_better_labels_inline {
  display: flex;
  align-items: start;
}