@import '../../sass/_custom-variables/libs';

.flot-overlay ~ .legend {
   > * {
    right: 0 !important;
  }

  .legendColorBox {
    padding-right: 5px;
  }
}

.legendLayer {
  font-size: .95em;

  text {
    transform: translateY(2px);
  }
}

@if $enable-light-style {
  .light-style {
    @import "../../sass/_appwork/include";

    .flot-tick-label,
    .legendLayer text {
      font-size: $font-size-sm;
      fill: $body-color;
    }

    .flotTip {
      padding: .25rem .625rem !important;
      border-color: $tooltip-bg !important;
      border-radius: $border-radius !important;
      background-color: $tooltip-bg !important;
      color: $tooltip-color !important;
      font-size: .6875rem !important;
    }

    .legendLayer {
      color: $body-color;
    }

    .legendLayer .background {
      fill: rgba-to-hex($gray-50, $rgba-to-hex-bg);
    }
  }
}

@if $enable-material-style {
  .material-style {
    @import "../../sass/_appwork/include-material";

    .flot-tick-label,
    .legendLayer text {
      font-size: $font-size-sm;
      fill: $body-color;
    }

    .flotTip {
      padding: .25rem .625rem !important;
      border-color: $tooltip-bg !important;
      border-radius: $border-radius !important;
      background-color: $tooltip-bg !important;
      color: $tooltip-color !important;
      font-size: .6875rem !important;
    }

    .legendLayer {
      color: $body-color;
    }

    .legendLayer .background {
      fill: rgba-to-hex($gray-50, $rgba-to-hex-bg);
    }
  }
}

@if $enable-dark-style {
  .dark-style {
    @import "../../sass/_appwork/include-dark";

    .flot-tick-label,
    .legendLayer text {
      font-size: $font-size-sm;
      fill: $body-color;
    }

    .flotTip {
      padding: .25rem .625rem !important;
      border-color: $tooltip-bg !important;
      border-radius: $border-radius !important;
      background-color: $tooltip-bg !important;
      color: $tooltip-color !important;
      font-size: .6875rem !important;
    }

    .legendLayer {
      color: $body-color;
    }

    .legendLayer .background {
      fill: rgba-to-hex($gray-50, $rgba-to-hex-bg);
    }
  }
}