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

  &.bar {
    --#{ $variable-prefix }labels-size: 80px;

    &:not(.show-labels) {
      --#{ $variable-prefix }labels-size: 0;

      tbody {
        tr {
          th {
            @include visually-hidden;
          }
        }
      }
    }
    &.show-labels {
      tbody {
        tr {
          th {
            display: flex;
            flex-direction: row;
            gap: 5px;
            align-items: var(--#{ $variable-prefix }labels-align-block, center);
          }
        }
      }

      &:not(.reverse) {
        &:not(.reverse-labels) {
          tbody {
            tr {
              th {
                justify-content: var(--#{ $variable-prefix }labels-align-inline, flex-start);
              }
            }
          }
        }
        &.reverse-labels {
          tbody {
            tr {
              th {
                justify-content: var(--#{ $variable-prefix }labels-align-inline, flex-end);
              }
            }
          }
        }
      }
      &.reverse {
        &:not(.reverse-labels) {
          tbody {
            tr {
              th {
                justify-content: var(--#{ $variable-prefix }labels-align-inline, flex-end);
              }
            }
          }
        }
        &.reverse-labels {
          tbody {
            tr {
              th {
                justify-content: var(--#{ $variable-prefix }labels-align-inline, flex-start);
              }
            }
          }
        }
      }

      tr.hide-label th,
      th.hide-label {
        @include visually-hidden;
      }
    }
  }

  &.column,
  &.area,
  &.line {
    --#{ $variable-prefix }labels-size: 1.5rem;

    &:not(.show-labels) {
      --#{ $variable-prefix }labels-size: 0;

      tbody {
        tr {
          th {
            @include visually-hidden;
          }
        }
      }
    }
    &.show-labels {
      tbody {
        tr {
          th {
            display: flex;
            flex-direction: column;
            align-items: var(--#{ $variable-prefix }labels-align-inline, center);
          }
        }
      }

      &:not(.reverse) {
        &:not(.reverse-labels) {
          tbody {
            tr {
              th {
                justify-content: var(--#{ $variable-prefix }labels-align-block, flex-end);
              }
            }
          }
        }
        &.reverse-labels {
          tbody {
            tr {
              th {
                justify-content: var(--#{ $variable-prefix }labels-align-block, flex-start);
              }
            }
          }
        }
      }
      &.reverse {
        &:not(.reverse-labels) {
          tbody {
            tr {
              th {
                justify-content: var(--#{ $variable-prefix }labels-align-block, flex-start);
              }
            }
          }
        }
        &.reverse-labels {
          tbody {
            tr {
              th {
                justify-content: var(--#{ $variable-prefix }labels-align-block, flex-end);
              }
            }
          }
        }
      }

      tr.hide-label th,
      th.hide-label {
        @include visually-hidden;
      }
    }
  }

  // Align Labels
  &.bar,
  &.column,
  &.area,
  &.line {

    // Align Inline
    &.labels-align-inline-start {
      tbody {
        tr {
          th {
            --#{ $variable-prefix }labels-align-inline: flex-start;
          }
        }
      }
    }
    &.labels-align-inline-end {
      tbody {
        tr {
          th {
            --#{ $variable-prefix }labels-align-inline: flex-end;
          }
        }
      }
    }
    &.labels-align-inline-center {
      tbody {
        tr {
          th {
            --#{ $variable-prefix }labels-align-inline: center;
          }
        }
      }
    }

    // Align Block
    &.labels-align-block-start {
      tbody {
        tr {
          th {
            --#{ $variable-prefix }labels-align-block: flex-start;
          }
        }
      }
    }
    &.labels-align-block-end {
      tbody {
        tr {
          th {
            --#{ $variable-prefix }labels-align-block: flex-end;
          }
        }
      }
    }
    &.labels-align-block-center {
      tbody {
        tr {
          th {
            --#{ $variable-prefix }labels-align-block: center;
          }
        }
      }
    }
  }
}
