/* =========================
   Variables
   ========================= */
:root {
  --axis-width: 280px;
  --axis-height: 20px;
  --bar-height: 15px;

  --spacing-gap: 10px;
  --spacing-small: 4px;
  --label-shift: 15px;

  --marker-color: var(--clr-white);
  --marker-size: 6px;
  --marker-offset: -5px;

  --bg-neutral: #ece9e7;
  --bg-light: #ecd6d5;

  --color-negative: rgba(234, 134, 134, 1);
  --color-positive: rgba(51, 169, 161, 1);
  --color-middle: rgba(255, 205, 103, 1);

  --font-size: 12px;
  --font-color: var(--clr-white);
  --font-weight: 300;

  --legend-symbol-size: 15px;
  --legend-margin-left: 30px;

  --gradient-negative: linear-gradient(to right, var(--color-negative) 0%, transparent 100%);
  --gradient-positive: linear-gradient(to right, transparent 0%, var(--color-positive) 100%);
  --gradient-middle: linear-gradient(to right,
      rgba(255, 205, 103, 0.01) 0%,
      var(--color-middle) 50%,
      transparent 100%);
  --gradient-positive-only: linear-gradient(to right, transparent 0%, rgba(226, 64, 64, 1) 100%);
}

.color-axis_layout-1 .legends__container {
  display: flex;
  gap: var(--sp9);
}

/* =========================
   Axis Layout
   ========================= */
.color-axis_layout-1 .color-axis-block {
  width: var(--axis-width);
}

.color-axis_layout-1 .color-axis {
  width: 100%;
  position: relative;
}

.color-axis_layout-1 .color-axis-inner {
  position: relative;
  display: flex;
  width: 100%;
  height: var(--bar-height);
  background: var(--bg-neutral);
}

/* =========================
   Color Areas
   ========================= */
.color-axis_layout-1 .color-area {
  width: 50%;
  height: 100%;
}

.color-axis_layout-1 .color-area-negative {
  background: var(--gradient-negative);
}

.color-axis_layout-1 .color-area-positive {
  background: var(--gradient-positive);
}

.color-axis_layout-1 .color-area.color-area-middle {
  position: absolute;
  inset: 0;
  background: var(--gradient-middle);
}

/* =========================
   Axis Values
   ========================= */
.color-axis_layout-1 .color-axis-values {
  position: relative;
}

.color-axis_layout-1 .axis-values-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: var(--spacing-small);
  padding-top: calc(var(--spacing-small) + 1px);
  height: var(--axis-height);
  border-top: 1px solid var(--marker-color);
}

/* =========================
   Value Labels
   ========================= */
.color-axis_layout-1 .value-label {
  width: 20%;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  color: var(--font-color);
  text-align: left !important;
  position: relative;
}

.color-axis_layout-1 .label-inner {
  display: inline-block;
  transform: translateX(-50%);
}

.color-axis_layout-1 .negative-value {
  margin-left: calc(var(--label-shift) * -1);
}

.color-axis_layout-1 .positive-value {
  margin-right: calc(var(--label-shift) * -1);
}

/* =========================
   Markers
   ========================= */
.color-axis_layout-1 .value-label:after,
.color-axis_layout-1 .axis-values-inner:before,
.color-axis_layout-1 .color-axis-values:before,
.color-axis_layout-1 .color-axis-values:after {
  content: "";
  position: absolute;
  width: 1px;
  height: var(--marker-size);
  background-color: var(--marker-color);
  top: var(--marker-offset);
}

.color-axis_layout-1 .axis-values-inner:before {
  left: 50%;
  margin-left: -0.5px;
  opacity: 0;
}

.color-axis_layout-1 .color-axis-values:before {
  left: 0;
  top: 1px;
}

.color-axis_layout-1 .color-axis-values:after {
  right: 0;
  top: 1px;
  opacity: 0;
}

.color-axis_layout-1 .value-label:after {
  right: 0;
  margin: 0 auto;
}

/********** Map Legend Positive Only *******/

.map-legend-positive-only .color-area-negative {
  display: none;
}

.map-legend-positive-only .color-area-positive {
  width: 100%;
  background: var(--gradient-positive-only);
}

.map-legend-positive-only .value-label:first-child {
  text-align: left;
  opacity: 1;
}

.map-legend-positive-only .value-label:last-child {
  text-align: right;
  opacity: 1;
  width: 0;
}

.map-legend-positive-only .value-label:last-child:after {
  opacity: 0;
}

/* =========================
   Other Legends
   ========================= */
.color-axis_layout-1 .visualisation-legends {
  width: auto;
}

.color-axis_layout-1 .legend-item {
  display: flex;
  gap: var(--spacing-gap);
  /* flex-wrap: wrap; */
  align-items: flex-start;
  cursor: default;
  margin: 0;
  width: auto;
}

.color-axis_layout-1 .legend-item .serieName {
  width: auto;
  color: var(--clr-white);
  padding-left: 2px;
  font-weight: var(--font-weight);
}

.color-axis_layout-1 .legend-item .symbol {
  width: var(--legend-symbol-size);
  height: var(--legend-symbol-size);
}