.table {
  background-color: #fff;

  &__name {
    position: relative;
    padding: 8px;

    border: 0;
    border-radius: 4px 4px 0 0;

    font-weight: bold;
    text-align: center;
  }

  &__columns {
    border: 1px solid #cbd2d9;
    border-top: 0;
    border-radius: 0 0 4px 4px;
  }

  &__description {
    display: none;
    position: absolute;
    top: 50%;
    right: -6px;
    width: 150px;
    transform: translateX(100%) translateY(-50%);
    padding: 8px;
    z-index: 1000;

    border: 1px solid #cbd2d9;
    border-radius: 4px;

    background-color: #fff;

    font-weight: normal;
    text-align: left;

    &:after {
      position: absolute;
      top: 50%;
      right: 100%;
      transform: translateX(-0) translateY(-50%);

      border-width: 3px;
      border-style: solid;
      border-color: transparent #fff transparent transparent;

      content: "";
    }

    &:before {
      position: absolute;
      top: 50%;
      right: 100%;
      transform: translateX(-0.5px) translateY(-50%);

      border-width: 4px;
      border-style: solid;
      border-color: transparent #cbd2d9 transparent transparent;

      content: "";
    }

    &--active {
      display: block;
    }
  }
}