/*
 * Copyright 2019 dialog LLC <info@dlg.im>
 */

@import '../../../styles/variables.css';

:root {
  --activity-pinned-message-font-family: var(--default-font-family);
  --activity-pinned-message-border-color: color-mod(#000 alpha(15%));
  --activity-pinned-message-title-color: #000;
  --activity-pinned-message-title-font-size: var(--default-font-size);
  --activity-pinned-message-time-color: var(--default-font-color-light);
  --activity-pinned-message-time-font-size: 13px;
}

.container {
  all: initial;
  font-family: var(--activity-pinned-message-font-family);
  display: flex;
  flex-flow: row nowrap;
  position: relative;
  margin: calc(var(--default-padding) / 2);
  padding: calc(var(--default-padding) / 2);
  transition: box-shadow 175ms ease-out;
  box-shadow: inset 0 0 0 1px var(--activity-pinned-message-border-color);
  border-radius: var(--default-border-radius);

  &:hover {
    box-shadow: inset 0 0 0 1px var(--activity-pinned-message-border-color),
      0 4px 4px -2px color-mod(#000 alpha(10%));
    & .remove {
      display: block;
    }
  }
}

.clickable {
  cursor: pointer;
}

.avatar {
  flex: 0 0 auto;
  margin-right: calc(var(--default-padding) / 2);
}

.wrapper {
  flex: 1 1 auto;
  @mixin flex-fix;
  display: flex;
  flex-flow: column nowrap;
}

.header {
  margin-bottom: 4px;
  position: relative;
}

.title {
  display: inline-block;
  font-weight: 500;
  color: var(--activity-pinned-message-title-color);
  font-size: var(--activity-pinned-message-title-font-size);
  margin-right: 6px;
}

.time {
  display: inline-block;
  font-size: var(--activity-pinned-message-time-font-size);
  color: var(--activity-pinned-message-time-color);
}

.contentWrapper {
  flex: 0 0 auto;
  line-height: 0;
}

.content {
  font-size: 14px;
  line-height: 16px;
  cursor: inherit;
}

.remove {
  display: none;
  position: absolute;
  top: 2px;
  right: 2px;

  &:hover {
    color: #666;
  }
}