$gap: 8px;

:host {
  display: flex;
  flex-flow: row nowrap;
  gap: 2px;
  align-items: center;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.viewed__count {
  font: var(--default-text-font);
  font-size: var(--default-font-size);
  line-height: 1;
  color: var(--color-gray-444);
}

.viewed-overlay {
  width: 275px;
  padding: 15px;
  background-color: var(--app-bg-color-l1);

  .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 {
    overflow-y: auto;
    max-height: 300px;
    padding-bottom: 10px;
    background-color: var(--app-bg-color-l1);
  }
}

.person__gravatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-right: 10px;
}

.viewed__eye__icon {
  display: flex;
  padding: 9px 0 8px;
  color: var(--color-gray-888);

  app-cmf-doodle-icon {
    display: flex;
  }
}

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

  ::ng-deep a:link,
  ::ng-deep a:visited,
  ::ng-deep a:hover {
    color: var(--color-gray-222);
    text-decoration: none;
  }
}

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

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

// Задизабленные чекбоксы, по дефолту отображаются активными из-за стилей инлайнедитов
.checkbox-label {
    ::ng-deep {
        mat-checkbox.mat-checkbox-checked.mat-checkbox-disabled .mat-checkbox-background,
        mat-checkbox.mat-checkbox-disabled .mat-checkbox-frame {
            background-color: var(--theme-hack-color, #757575) !important;
            border: 2px solid var(--theme-hack-color, #757575);
        }

    mat-checkbox.mat-checkbox-disabled + div {
      color: var(--color-gray-aaa);
    }
  }
}