@use "../stylesheets/stylesheets.component.color" as color;

.cell-header {
  font-size: 14px;
  color: color.$header-fore-color;
}

div[class^="col-"].cell-title {
  background-color: color.$cell-title-color;
}

div[class^="ckol-"].cell-capacity {
  background-color: color.$cell-capacity-color;
}

div[class^="col-"].cell-normal {
  background-color: color.$cell-normal-color;
}

div[class^="col-"].cell-feature {
  background-color: color.$cell-feature-color;
}

div[class^="col-"].cell-faded {
  background-color: color.$cell-faded-color;
}

div[class^="col-"].cell-key {
  color: color.$header-fore-color;
  border-color: transparent;
}

div[class^="col-"].cell-value {
  border-color: transparent;
}

div[class^="col-"].cell-title.faded-fore,
div[class^="col-"].cell-faded.faded-fore,
.cell-header.faded-fore {
  color: color.$faded-fore-color;
}

$figcaption-width: 12pt + 4px;

.image {
  position: relative;
  max-width: 900px + $figcaption-width;
}

.figure-img {
  padding-right: $figcaption-width;
}

.image figcaption {
  position: absolute;
  width: 100%;
  left: 100%;
  transform: rotate(-90deg);
  transform-origin: top left;
  margin-left: 2px - $figcaption-width;
  padding-left: 0.5rem;
  font-size: 12px;
  text-transform: uppercase;
}

.logo {
  float: right;
  width: 50px;
  margin-left: 2px;
  margin-bottom: 2px;
}