.column-name {
  $root: &;

  position: relative;
  z-index: 50;

  border-bottom: 0;

  font-size: 12px;
  line-height: 1;

  cursor: pointer;

  &__name {
    margin-right: 16px;
  }

  &__type {
    color: #bbb;
  }

  &__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;

    &: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: "";
    }

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

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

      content: "";
    }

    #{$root}--selected & {
      display: block;
    }
  }

  &__inner {
    display: flex;
    justify-content: space-between;
    padding: 8px;

    position: relative;
  }

  &:last-child {
    border-bottom: 0 !important;
    border-radius: 0 0 4px 4px;
  }

  &:hover {
    background-color: #efefef;
  }
}