/* Used for app only. Do not deploy with library! */

html {
    font-size: 62.5%; /* 1rem = 10px */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); //stylelint-disable-line number-max-precision
    text-rendering: optimizeLegibility !important; //stylelint-disable-line plugin/no-unsupported-browser-features
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

#root {
    display: flex;
    font-size: 1rem;
}

.smartcharts-mobile {
    /*
      For charts app, we want the chart controls to still
      be visible when its dropdown shows up. To do this we
      assume the height of the chart controls is always 40px
      in mobile:
     */
    .ciq-period,
    .cq-download,
    .ciq-views,
    .ciq-drawtools,
    .ciq-studies,
    .cq-chart-setting,
    .ciq-draw-tools,
    .ciq-chart-types {
        .cq-modal__overlay {
            height: calc(100% - 40px);
        }
    }
}

.chart-marker-historical {
    width: 2px;
    height: 100%;
    top: 0px;
    position: absolute;
    @include themify($themes) {
        border-left: 1.5px dashed themed('ChartHistoricalMarker');
    }

    span {
        border-radius: 3px;
        white-space: nowrap;
        left: -54px;
        position: absolute;
        bottom: 0px;
        padding: 1px 9px;
        @include themify($themes) {
            color: themed('ChartHistoricalMarkerFont');
        }
        font-size: 10px;
        line-height: 14px;
        @include themify($themes) {
            background: themed('ChartHistoricalMarker');
        }
    }
}