// Govspeak charts
// https://components.publishing.service.gov.uk/component-guide/govspeak/charts
// Uses Magna Charta (https://github.com/alphagov/magna-charta)
//
// Support:
// - alphagov/whitehall: ✔︎
// - alphagov/govspeak: ✔︎

// adapted from magna-charta example stylesheet
// https://github.com/alphagov/magna-charta/blob/master/demo/stylesheets/magna-charta.css

// stylelint-disable max-nesting-depth

.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
.gem-c-govspeak {
  // DEFAULT CHART STYLES

  $label-width: 40%; // Horizontal width taken up by the bar labels
  $label-align: right; // Label alignment
  $base-unit: 16px; // For font sizes and related spacing
  $compact-font-size: 12px; // For the 'compact' bar style
  $bar-padding: 8px; // The padding between the bar values and the edge of the bar
  $bar-spacing: 5px; // The spacing around the bars
  $stack-spacing: 1px; // For stacked bars, the spacing between each stack in a bar
  $caption-side: top; // Caption alignment. Top or bottom.
  $key-width: 160px; // Only used by IE. Other browsers get smallest width that fits content

  // CHART COLOUR SCHEME

  $chart-border: govuk-colour("white"); // Chart border colour
  $key-border: govuk-colour("white"); // Key border colour
  $bar-colours: govuk-colour("blue"), govuk-colour("turquoise"), govuk-colour("green"), govuk-colour("light-green"), govuk-colour("yellow"), govuk-colour("orange"), govuk-colour("red"), govuk-colour("bright-purple", $legacy: "bright-red");
  $bar-text-colours: govuk-colour("white"), govuk-colour("black"), govuk-colour("white"), govuk-colour("black"), govuk-colour("black"), govuk-colour("black"), govuk-colour("white"), govuk-colour("white");
  $bar-cell-colour: govuk-colour("black");
  $bar-outdented-colour: govuk-colour("black");

  // CHART STYLES
  .mc-chart {
    font-size: $base-unit;
    display: table;
    width: 100%;
    border-spacing: 0 $bar-spacing;
    border: 1px solid $chart-border;
    padding: $base-unit 0;
    position: relative;
    margin-bottom: $base-unit;

    // CAPTION STYLES
    .mc-caption {
      display: table-caption;
      font-size: $base-unit;
      text-align: center;
      caption-side: $caption-side;
      margin: $base-unit 0;
    }

    // KEY STYLES
    .mc-thead {
      background-color: govuk-colour("white");
      display: table-header-group;
      padding: $bar-spacing;
      border: 1px solid $key-border;

      .mc-th {
        display: none; // Hide all header cells first
      }

      .mc-key-header {
        display: block; // Show the header cells that form part of the key
        margin-bottom: $bar-spacing;
        margin-left: 100%;
        padding-left: $bar-spacing;
        border-left: $base-unit solid;
        text-align: left;
        font-weight: normal;
        width: 100%;

        &:last-child {
          margin-bottom: 0;
        }
      }

      // Key colours
      @for $i from 0 to length($bar-colours) {
        .mc-key-#{$i + 1} {
          border-left-color: nth($bar-colours, $i + 1);
        }
      }
    }

    // Right and left aligned keys
    &.right-key .mc-thead,
    &.left-key .mc-thead {
      position: absolute;
      top: 100px;

      .mc-key-header {
        margin-left: 0;
      }
    }

    &.right-key .mc-thead {
      right: 26px;
    }

    &.left-key .mc-thead {
      left: 26px;
    }

    // Hidden keys
    &.no-key .mc-thead {
      display: none;
    }

    // BAR STYLES
    .mc-tbody {
      display: table-row-group;

      .mc-tr {
        display: table-row;

        // Bars and bar labels
        .mc-bar-cell,
        .mc-key-cell {
          padding-right: $bar-spacing;
          margin-right: $stack-spacing;
          box-sizing: border-box;
          border: 0 solid;
        }

        // Bars
        .mc-bar-cell {
          display: block;
          text-align: left;
          padding: $bar-padding 0;
          margin-bottom: 1px;
          color: govuk-colour("white");
          text-indent: $bar-padding;
        }

        // Bar colours
        @for $i from 0 to length($bar-colours) {
          .mc-bar-#{$i + 1} {
            background-color: nth($bar-colours, $i + 1);
            color: nth($bar-text-colours, $i + 1);
          }
        }

        // Negative bars
        .mc-bar-negative {
          text-align: right;
          padding-right: $bar-padding;
        }

        .mc-value-overflow {
          text-indent: -99999px !important; // stylelint-disable-line declaration-no-important
        }

        // Bar labels
        .mc-key-cell {
          width: $label-width;
          text-indent: 26px;
          text-align: $label-align;
          display: table-cell;
          vertical-align: middle;
        }
      }
    }

    // STACKED CHARTS
    &.mc-stacked {
      .mc-stacked-header {
        display: none; // Hide the header for the totals column
      }

      .mc-th:nth-last-child(2) {
        margin-bottom: 0;
      }

      .mc-stacked-total {
        padding: $bar-padding 0;
        background-color: transparent !important; // stylelint-disable-line declaration-no-important
        color: govuk-colour("black");
        display: inline-block;
        text-indent: 5px;
      }

      .mc-tbody .mc-bar-cell {
        display: inline-block;
      }
    }

    // COMPACT CHARTS
    &.compact {
      .mc-td.mc-bar-cell {
        font-size: $compact-font-size;
        text-indent: 2px;
        padding: 0;
      }
    }

    // Charts with multiple columns get different coloured bars
    $len: length($bar-colours);

    @for $i from 0 to $len {
      .mc-tr .mc-td.mc-bar-cell.mc-bar-#{$i + 1} {
        background-color: nth($bar-colours, $i + 1);
      }

      .mc-tr .mc-th.mc-key-#{$i + 1} {
        border-left-color: nth($bar-colours, $i + 1);
      }
    }

    .mc-td,
    .mc-th {
      padding: 0;
      padding-right: $bar-spacing;
      margin-right: $stack-spacing;
      border: 0 solid;

      &.mc-bar-cell {
        display: block;
        background-color: $bar-cell-colour; // Just for testing
        text-align: left;
        padding: $bar-padding 0;
        margin-bottom: 1px;
        color: govuk-colour("white");
        text-indent: 4px;
        line-height: 1.5;
      }
    }

    .mc-bar-outdented {
      span {
        color: $bar-outdented-colour;
      }
    }

    caption {
      caption-side: $caption-side;
    }

    .mc-td.mc-key-cell {
      width: $label-width;
      text-indent: 26px;
      text-align: $label-align;
      display: table-cell;
      vertical-align: middle;
    }

    // OUTDENTED BAR VALUES
    &.mc-outdented {
      .mc-tr {
        .mc-bar-cell {
          color: $bar-cell-colour;
        }

        .mc-bar-negative {
          text-align: left;
        }
      }
    }

    &.mc-negative .mc-td.mc-key-cell {
      padding-right: 25px;
    }
  }

  .mc-outdented .mc-bar-cell.mc-bar-negative {
    text-align: left;
  }

  .mc-toggle-button {
    border: 1px solid $govuk-border-colour;
    color: $govuk-link-colour;
    cursor: pointer;
    margin: govuk-spacing(0);
    padding: govuk-spacing(2);
    background-color: govuk-colour("white");

    &:focus {
      @include govuk-focused-text;
      background-color: $govuk-focus-colour;
      border-color: transparent;
    }
  }

  // Hides the original table
  .mc-hidden,
  .mc-hidden caption {
    display: none;

    // It's reapplied to captions because Firefox can't hide
    // table captions unless it's applied directly to it. Go figure.
  }
}