@import 'element:ef-tooltip';

:host {
  // chart color cycles
  --chart-color-1: @dataviz-color-1;
  --chart-color-2: @dataviz-color-2;
  --chart-color-3: @dataviz-color-3;
  --chart-color-4: @dataviz-color-4;
  --chart-color-5: @dataviz-color-5;
  --chart-color-6: @dataviz-color-6;
  --chart-color-7: @dataviz-color-7;
  --chart-color-8: @dataviz-color-8;
  --chart-color-9: @dataviz-color-9;
  --chart-color-10: @dataviz-color-10;

  --line-width: 2;
  --fill-opacity: 0.4;

  --text-color: fade(@global-text-color, 80%);
  --background-color: @panel-background-color;

  --chart-up-color: @dataviz-color-green;
  --chart-down-color: @dataviz-color-red;

  --cross-hair-color: @control-text-color;
  --grid-vert-line-color: fade(@grid-border-color, 50%);
  --grid-horz-line-color: fade(@grid-border-color, 50%);

  --scale-price-border-color: fade(@grid-border-color, 50%);
  --scale-times-border-color: fade(@grid-border-color, 50%);

  [part='legend'] {
    top: 15px;
    color: var(--text-color);
    font-size: 90%;
    .row {
      margin: 1px 5px;
    }
    .price {
      margin-right: 5px;
    }
    .ohlc {
      margin-right: 2px;
    }
    &.horizontal {
      display: flex;
      max-width: calc(100% - 75px);
      flex-wrap: wrap;
    }
  }

  [part='jump-button-container'] {
    display: none;
    position: absolute;
    transition: background-color 100ms;
    width: 23px;
    height: 23px;
    color: @button-text-color;
    background-color: @button-background-color;
    border: @button-border;
    box-shadow: @button-box-shadow;
    border-radius: 100%;
    z-index: 1000;
    cursor: pointer;
    &:hover {
      color: @button-hover-text-color;
      background-color: @button-hover-background-color;
      border-color: @button-hover-border-color;
      box-shadow: @button-hover-box-shadow;
    }
    &:active {
      background-color: @button-pressed-background-color;
      color: @button-pressed-text-color;
      box-shadow: @button-pressed-box-shadow;
    }
  }

  [part='jump-button'] {
    position: relative;
    display: inline-block;
    width: 5px;
    height: 5px;
    border-top: 2px solid @button-text-color;
    border-right: 2px solid @button-text-color;
    transform: rotate(45deg) skew(0deg);
    margin-top: 8px;
    margin-left: 7px;
  }
  [part='branding-container'] {
    position: absolute;
    opacity: @overlay-opacity;
    bottom: 3px;
    z-index: 1000;

    &.left {
      left: 10px;
    }
    &.right {
      right: 10px;
    }
    &.none {
      top: 13px;
      right: 13px;
    }
  }
  [part='branding'] {
    height: 22px;
    width: 22px;
    fill: fade(@global-text-color, 80%);
  }
}