/*
 * Area Chart
 */
.charts-css {

  &.area {

    // Layout
    tbody {
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      width: 100%;
      aspect-ratio: var(--#{ $variable-prefix }aspect-ratio, 21 / 9);

      tr {
        position: relative;

        display: flex;
        justify-content: flex-start;

        // Even row size
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0;
        overflow-wrap: anywhere;

        th {
          position: absolute;
          inset: 0;
          height: var(--#{ $variable-prefix }labels-size);
        }

        td {
          display: flex;
          flex-flow: column;
          position: absolute;
          width: 100%;
          height: 100%;
          inset: 0;
          z-index: 0;

          &::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
          }

          &::after {
            content: "";
            width: 100%;
          }
        }
      }
    }

    // Orientation - reverse
    &:not(.reverse) {
      tbody {
        tr {
          align-items: flex-end;

          th {
            justify-content: flex-end;
          }

          td {
            justify-content: center;

            .data {
              align-items: flex-start;
            }
          }
        }
      }
    }
    &.reverse {
      tbody {
        tr {
          align-items: flex-start;

          th {
            justify-content: flex-start;
          }

          td {
            justify-content: center;

            .data {
              align-items: flex-end;
            }
          }
        }
      }
    }

    // Orientation - reverse labels
    &:not(.reverse-labels) {
      &:not(.reverse) {
        tbody {
          tr {
            margin-block-end: var(--#{ $variable-prefix }labels-size);

            th {
              margin-block-start: auto;
              margin-block-end: calc(-1 * var(--#{ $variable-prefix }labels-size) - var(--#{ $variable-prefix }primary-axis-width));
            }
          }
        }
      }
      &.reverse {
        tbody {
          tr {
            margin-block-start: var(--#{ $variable-prefix }labels-size);

            th {
              margin-block-end: auto;
              margin-block-start: calc(-1 * var(--#{ $variable-prefix }labels-size) - var(--#{ $variable-prefix }primary-axis-width));
            }
          }
        }
      }
    }
    &.reverse-labels {
      &:not(.reverse) {
        tbody {
          tr {
            margin-block-start: var(--#{ $variable-prefix }labels-size);

            th {
              margin-block-end: auto;
              margin-block-start: calc(-1 * var(--#{ $variable-prefix }labels-size));
            }
          }
        }
      }
      &.reverse {
        tbody {
          tr {
            margin-block-end: var(--#{ $variable-prefix }labels-size);

            th {
              margin-block-start: auto;
              margin-block-end: calc(-1 * var(--#{ $variable-prefix }labels-size));
            }
          }
        }
      }
    }

    // Orientation - reverse data
    &:not(.reverse-data) {
      tbody {
        flex-direction: row;
      }
    }
    &.reverse-data {
      tbody {
        flex-direction: row-reverse;
      }
    }

    // Orientation - reverse datasets
    &:not(.reverse-datasets) {
      tbody {
        tr {
          flex-direction: row;
        }
      }
    }
    &.reverse-datasets {
      tbody {
        tr {
          flex-direction: row-reverse;
        }
      }
    }

    // Area
    &:not(.reverse) {
      &:not(.reverse-data) {
        tbody {
          tr {
            td {
              justify-content: flex-end;
              align-items: flex-end;

              &::before {
                clip-path:
                  polygon(
                    0% calc(100% * (1 - var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))))),
                    100% calc(100% * (1 - var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)))),
                    100% 100%,
                    0% 100%
                  );
              }

              .data {
                &:dir(ltr) {
                  transform: translateX(50%);
                }
                &:dir(rtl) {
                  transform: translateX(-50%);
                }
              }

              &::after {
                height: calc(100% * var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)));
              }
            }
          }
        }
      }
      &.reverse-data {
        tbody {
          tr {
            td {
              justify-content: flex-end;
              align-items: flex-start;

              &::before {
                clip-path:
                  polygon(
                    0% calc(100% * (1 - var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)))),
                    100% calc(100% * (1 - var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))))),
                    100% 100%,
                    0% 100%
                  );
              }

              .data {
                &:dir(ltr) {
                  transform: translateX(-50%);
                }
                &:dir(rtl) {
                  transform: translateX(50%);
                }
              }

              &::after {
                height: calc(100% * var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)));
              }
            }
          }
        }
      }
    }
    &.reverse {
      &:not(.reverse-data) {
        tbody {
          tr {
            td {
              justify-content: flex-end;
              align-items: flex-end;

              &::before {
                clip-path:
                  polygon(
                    0% 0%,
                    100% 0%,
                    100% calc(100% * var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))),
                    0% calc(100% * var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))))
                  );
              }

              .data {
                &:dir(ltr) {
                  transform: translateX(50%);
                }
                &:dir(rtl) {
                  transform: translateX(-50%);
                }
              }

              &::after {
                height: calc(100% * (1 - var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))));
              }
            }
          }
        }
      }
      &.reverse-data {
        tbody {
          tr {
            td {
              justify-content: flex-end;
              align-items: flex-start;

              &::before {
                clip-path:
                  polygon(
                    0% 0%,
                    100% 0%,
                    100% calc(100% * var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)))),
                    0% calc(100% * var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)))
                  );
              }

              .data {
                &:dir(ltr) {
                  transform: translateX(-50%);
                }
                &:dir(rtl) {
                  transform: translateX(50%);
                }
              }

              &::after {
                height: calc(100% * (1 - var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))));
              }
            }
          }
        }
      }
    }
  }
}
