$gap: 8px;

.viewed-overlay {
  overflow-y: auto;
  width: 275px;
  padding: 15px;
  background-color: var(--color-gray-fff);

  .obj-followed__subscription,
  .checkbox-label,
  header {
    margin-bottom: $gap;
  }

  .obj-followed__title,
  header {
    font: var(--card-header-font);
  }

  .obj-followed {
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-primary-color);

    .obj-followed__title {
      margin-bottom: 5px;
    }

    .checkbox-list {
      display: flex;
      flex-direction: column;

      .checkbox-label {
        display: flex;

        .checkbox {
          margin-right: $gap;
        }
      }
    }
  }

  header {
    font-size: 15px;
  }

  .block {
    max-height: 300px;
    padding-bottom: 10px;
    background-color: var(--color-gray-fff);
  }
}

.person__gravatar {
  padding-right: 10px;
}

.viewed__eye__icon {
  display: flex;
  padding: 9px 0 8px;
  color: #8c8c8c;

  .viewed__count {
    padding-left: 5px;
    font-size: 13px;
  }
}

.viewed__person__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.block__viwer {
  display: flex;
  align-items: center;
  margin-bottom: 5px;

  &:last-child {
    margin-bottom: 0;
  }
}

::ng-deep .viewed__person__name {
  position: relative;
  top: -2px;

  a {
    color: var(--color-gray-222);
    text-decoration: none;
  }
}