@import './fonts.scss';
@import './subsocial-vars.scss';

html {
  height: 100%;
  font-size: 16px;
}

body,
#root {
  height: 100%;
  background-color: $color_page_bg !important;
  color: $color_font_normal !important;
  font-size: $font_normal !important;
}

h1 { font-size: $space_huge; }

h2 { font-size: $space_big; }

h1,
h2,
h3,
h4,
h5,
h6 {
  color: rgba(0, 0, 0, .6);
}

code,
pre {
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;
}

// a { color: $color_link !important }

/* Common Resusable Classes */
/* ---------------------------------------- */

.FontNormal {
  font-size: $font_normal !important
}

.DfSegment {
  background-color: #fff;
  padding: $space_normal;
  position: relative;
  border-radius: $border_radius_normal;
  border: 1px solid $color_light_border;
  @extend .DfBoxShadow;
}

.DfBalance {
  display: flex;
  color: $color_muted
}

.DfBalanceDecimals {
  color: #999;
}

.ant-modal-header,
.ant-modal-body,
.ant-modal-footer {
  padding: $space_normal;
  font-size: $font_normal;
}

.ant-modal-title {
  font-size: $font_large;
}

.ant-list-lg.ant-list-item {
  padding: 0;
}

.ant-descriptions-item-label {
  color: $color_muted;
}

.ant-tooltip {
  max-width: 350px;
}

.ant-popover-inner-content {
  max-width: 410px;
}

.ant-descriptions-header {
  margin-bottom: $space_tiny;
  border-bottom: 1px solid $color_light_border;
}

.DfLinkOnHover {
  &:hover {
    color: $color_link !important;
    cursor: pointer;
    text-decoration: none;
  }
}

.DfBlackLink {
  color: $color_font_normal !important;
  @extend .DfLinkOnHover;
}

.DfBoldBlackLink {
  @extend .DfBlackLink;
  font-weight: 600;
}

.DfSeeMoreLink,
.DfSeeMore a {
  @extend .DfBoldBlackLink;
  white-space: nowrap;
  color: $color_muted;
}

.DfBoxShadow {
  -moz-box-shadow: $shadow;
  -webkit-box-shadow: $shadow;
  box-shadow: $shadow;
}

.DfNoBoxShadow {
  $shadow: none !important;
  -moz-box-shadow: $shadow;
  -webkit-box-shadow: $shadow;
  box-shadow: $shadow;
}

.DfProfileModalLink {
  @extend .DfGreyLink;
  margin-right: $space_big;
}

/* Other Styles */
/* ---------------------------------------- */

.header {
  margin: 0;
  line-height: normal;
  // display: flex !important;
  // align-items: center;
  font-size: $font_big;
  font-weight: 600;
}

.DfSideBar {
  .ant-drawer-content-wrapper {
    width: 275px !important;
  }

  position: fixed;
  z-index: 10;
  top: $height_top_menu;
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.DfSideBar .am-drawer-sidebar {
  background-color: #fff;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.ant-comment-content-author {
  // font-size: inherit;
  // line-height: inherit;
  margin-top: $space_tiny;
  margin-bottom: 0;
}

.am-drawer-content {
  padding-top: 0 !important;
  text-align: left !important;
}

.ant-layout-sider-children {
  overflow: auto;
}

/* Used as a hack to fix ReactBase font-size */
.fontSizeNormal {
  font-size: $font_normal !important;
}

.DfPageContent {
  padding: $space_big 0;
  overflow-wrap: break-word;
  margin: 0 auto;
  color: $color_font_normal;
}

.DfTags {
  .anticon {
    color: #bbb !important;
    margin-right: .35rem !important;
  }

  .ant-tag {
    font-size: .85rem;
    padding: .25rem .5rem;

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

  a {
    @extend .DfLinkOnHover;
  }
}

.ui.search.selection.dropdown>.text {
  margin-left: 0;

  .ui--KeyPair {
    margin-left: 14.5%;
    width: 85.5%;

    .ui--IdentityIcon-Outer {
      left: -3.1rem !important;
      top: -.7rem !important;
    }
  }
}

@media (min-width: 1200px) {
  .DfBrand {
    font-size: $font_normal;
  }
}

.DfBrand {
  zoom: 0.7;
  font-size: $font_normal;
  color: $color_secondary;
  cursor: pointer;

  img {
    max-width: 160px;
    margin-top: -5px;
  }
}

.DfBrand:hover {
  color: $color_secondary;
}

.DfSummary {
  font-size: $font_normal;
  color: $color_font_normal;
  word-break: break-word;
  // margin: $space_small 0;
  /* white-space: pre-wrap; */
}

.DfBookPage {
  @extend .DfBoxShadow;
  margin: $space_big 0;
  padding: $space_normal;
  background-color: #fff;
  border-radius: $border_radius_normal;
}

.DfPostTitle--preview {
  @extend .DfBoldBlackLink;
  margin-bottom: $space_small;
}

.DfEntirePost {
  /* padding: 0 $space_tiny; */

  .DfPostContent {
    @extend .DfBookPage;
    margin-bottom: $space_small;
  }

  .DfSpacePreviewOnPostPage > .DfSegment {
    @extend .DfBookPage;
  }

  .DfCommentSection {
    margin-top: $space_small
  }
}

.DfPostName {
  margin-top: 0;
  margin-bottom: $space_normal !important;
  margin-right: $space_normal;
  line-height: 1.25;
  color: $color_font_normal;
  font-size: 2.5rem;
  // font-weight: 700;
  // font-family: $font_family_title;
}

.DfPostImage {
  max-width: 100%;
  margin-bottom: $space_normal;
}

.DfMenuSpaceLink {
  color: $color_secondary;
  padding: $space_tiny;
  padding-left: $space_normal;
  display: block;

  .ProfileDetails {
    .DfAvatar.space {
      margin-right: 0;
    }

    .content {
      padding: 0;
      padding-left: .5rem;
    }

    .handle {
      margin-right: 0;
    }
  }
}

.ProfilePreviews,
.FullProfile {
  .item {
    .image {
      padding: 0 !important;
    }

    .description {
      font-size: $font_normal;
    }
  }

  .ant-dropdown-trigger {
    margin-left: $space_tiny;
    height: min-content;
  }
}

.ant-dropdown-trigger {
  height: min-content;
}

.ProfilePreviews {
  &.ui.list>.item:first-child {
    padding-top: $space_small;
  }

  &.ui.list>.item:last-child {
    padding-bottom: $space_small;
  }
}

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

.ProfileDetails {
  display: flex !important;

  .content {
    padding: 0 $space_small;
  }

  .button {
    max-height: 2.5rem;
  }

  .handle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    margin-right: $space_tiny;

    .button {
      padding: $space_tiny $space_small;
    }
  }
}

.ant-popover {
  .ProfileDetails {
    .content {
      max-width: 330px;
      padding: 0;
      padding-left: $space_mini;
    }

    .DfPopup-about {
      color: $color_font_normal;
    }
  }
}

.DfIdentityIcon {
  margin-right: 0.5rem;
  cursor: pointer !important;
  border: 1px solid $color_light_border;
  background: #fff;
  border-radius: 100%;
}

.EditEntityBox {
  width: 100%;
  /* max-width: 600px; */

  .EditEntityForm {
    width: 100%;
  }
}

.ui--AddressComponents-info div {
  vertical-align: top;
}

.ui.threaded.comments .comment .comments {
  padding: 0 0 0 $space_large;
  margin: -1rem 0 0 $space_large;
}

form.ui.form.DfForm.EditEntityForm {
  margin-bottom: $space_huge;

  .EPadvanced {
    margin-bottom: $space_normal;
    padding-bottom: $space_normal;

    .EPadvacedTitle {
      cursor: pointer;
      font-size: $font_normal;
      font-weight: 700;
    }
  }

  .ETGtag {
    background: '#fff';
    border-style: dashed;
  }
}

.ui.basic.button:not(.disabled) {
  background-color: #fff;
}

.DfNoVoters {
  text-align: center;
  background-color: #fff;
  padding: 1rem;
}

.ui.img.avatar {
  width: initial;
  height: initial;
}

.ui.dropdown {
  margin: 0;
  display: flex;
  width: auto;
  height: min-content;
  width: initial;

  i {
    color: $color_muted;
  }

  .ui.selection.dropdown.menu {
    padding: .5rem .75rem !important;
  }
}

hr {
  border: 0;
  border-bottom: 1px solid $color_light_border;
}

.disable,
.disable:hover {
  color: $color_muted;
  text-decoration: none !important;
  cursor: default !important;
}

.DfDate {
  width: 100%;
  font-size: $font_small
}

.DfSocialLinks {
  margin-top: $space_small;
  font-size: $font_big;

  a {
    margin-right: $space_small;
  }
}

.asLink {
  @extend .DfLinkOnHover;
}

.asLink:hover {
  color: #0d548a
}

.DfSpaceStats {
  margin-top: $space_small;

  .DfStatItem {
    margin-right: $space_huge;

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

.DfSpaceBody {
  display: flex;
  width: 100%;

  .handle {
    max-width: 30rem;
  }

  .description {
    color: $color_font_normal;
  }
}

.ui.attached:not(.message)+.ui.attached.segment:not(.top) {
  border: none;
}

.DfCountsPreview {
  display: flex;
  justify-content: flex-start;
  margin-top: $space_normal;

  &>a,
  &>span {
    color: rgba(34, 36, 38, .8) !important;
    font-size: $font_small;
    margin-left: $space_normal;
  }
}

.ui--AddressComponents-address {
  @extend .DfBoldBlackLink;
}

.DfPostPreview {
  .ui.button {
    min-width: initial;
    max-height: initial;
  }
}

.DfRow {
  display: flex;
  justify-content: space-between;
}

.DfActionsPanel {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &.DfActionBorder {
    border-top: 1px solid rgba(34, 36, 38, .15);
  }

  .DfReactionsAction {
    button:first-of-type {
      // margin-left: -$space_normal;
      margin-right: $space_normal;
    }
  }
}

.DfAction {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: $font_normal;
  background-color: transparent;
  border: none;
  @extend .DfNoBoxShadow;

  &:hover,
  &:active,
  &:focus {
    cursor: pointer;
    background-color: transparent;
  }
}

.DfSharedSummary {
  .DfPostBody {
    margin-bottom: $space_large;
  }
}

.DfSegment.DfPostPreview {
  padding-bottom: 0;

  .DfInfo {
    width: -webkit-fill-available;
  }

  .DfContent {
    color: $color_font_normal;
    margin: $space_small 0;
  }

  .DfSharedSummary {
    .DfSegment {
      margin-bottom: 0;
      @extend .DfNoBoxShadow;
    }
  }

  .DfActionsPanel {
    padding: .25rem 0;
    justify-content: space-evenly;
  }

  .DfPostImagePreview {
    margin-left: $space_normal;
    margin-bottom: $space_normal;
    border-radius: $border_radius_normal;
    border: 1px solid $color_light_border;
    background-color: #f0f0f0;
    height: 170px;
  }
}

.DfGreyLink {
  color: $color_muted !important;
  cursor: pointer;

  a {
    color: $color_muted !important;
    cursor: pointer;
  }
}

.DfGreyLink:hover {
  a {
    color: $color_muted !important;
    text-decoration: underline;
    cursor: pointer;
  }

  color: $color_muted !important;
  text-decoration: underline;
  cursor: pointer;
}

.DfSelectedSpace {
  background-color: #e6f7ff;
  color: #1890fe;
  border-right: 2px solid #1890f3;
}

.DfBgImg {
  background-size: cover;
  background-position: center;
}

.text.muted,
.text.grey {
  color: $color_muted;
}

.text.smaller {
  font-size: $font_small
}

.Df--AddressComponents-details {
  color: $color_muted !important;
  font-size: $font_small;
  font-weight: normal;
}

.ui--AddressComponents {
  display: flex;

  .ui--IdentityIcon {
    margin-left: 0;
    margin-right: $space_small;
  }

  .AddressComponents.follow {
    float: right;

    .button {
      margin: 0;
    }
  }

  .ui--AddressComponents-info {
    display: flex;
    align-items: center;
  }

  .Df--AddressComponents-details {
    display: block;
  }

  .ui--AddressSummary-name,
  .ui--AddressSummary-balance {
    display: inline-flex;
    padding-top: 0;
    margin-right: 0 !important;
    font-size: $font_small !important;
    margin-right: $space_normal;
    color: $color_muted;
  }
}

.DfSection {

  .viewspace-minipreview {
    display: flex;
    justify-content: space-between;
    width: 70%;
  }

  .DfSection-title {
    border-bottom: 1px solid $color_light_border;
    display: flex;
  }

  li.ant-list-item.ant-list-item-no-flex {
    border: none;
    padding: 0;

    .DfCommentSection & {
      padding-top: $space_tiny;
    }
  }
}

@media (min-width: 767px) {
  .DfSectionOuter {
    min-width: $min_width_content;
    max-width: $max_width_content;
    width: $max_width_content;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0;

    .DfSectionOuter {
      width: 100%;
    }
  }

  .DfSection {
    margin: 0;
  }
}

.DfForm .ui--Labelled {
  align-items: end;

  &>label {
    padding-top: $space_small;
  }
}

.ui.top.left.flowing.popup.transition.visible {
  .ui--AddressComponents-address {
    font-size: $font_large;
  }

  .Df--AddressComponents-details {
    margin-right: $space_mini;
  }
}

.DfAvatar {
  display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid $color_light_border;

  &.space {
    margin-right: $space_tiny;
  }
}

.ui.top.left.flowing.popup.transition.visible {
  .DfAvatar {
    margin: 0 $space_tiny $space_tiny 0;
  }
}

.ProfileDetails.DfPreview {
  height: stretch;
}

.DfPopup-handle {
  font-size: $font_normal !important;
  color: #4e4e4e;
  margin: $space_mini 0;
}

.DfPopup-about {
  margin: $space_tiny 0;
}

.DfPopup-links {
  color: $color_muted;
  display: flex;
  justify-content: flex-start;
  margin: 0;
  margin-bottom: $space_tiny;

  .DfPopup-link {
    font-size: $font_normal;
    margin-right: $space_normal;
    @extend .DfGreyLink
  }
}

.markdown-body {
  a {
    color: $color_link !important;
  }
}

.DfMdEditor {

  .CodeMirror {
    font-size: 1rem;
    padding: 6.5px 11px; /* padding from ant design input */
  }

  .CodeMirror-scroll {
    min-height: 5rem !important;
  }

  .CodeMirror.cm-s-easymde.CodeMirror-wrap.CodeMirror-fullscreen {
    z-index: 1000;
  }

  .markdown-body {
    a {
      color: $color_link !important;
    }

    background-color: #fff !important;
    padding: $space_normal !important;
  }

  .editor-toolbar {
    border-color: $color_light_border;
    color: #c0c0c0;

    &.fullscreen {
      z-index: 1000;
    }
  }

  &.hideToolbar {
    .editor-toolbar {
      display: none;
    }

    .CodeMirror {
      border-radius: $border_radius_normal;
    }
  }

  &:hover .editor-toolbar {
    color: $color_font_normal;
  }

  .editor-statusbar {
    display: none;
  }
}

.DfMdEditor.error {

  .CodeMirror.cm-s-easymde.CodeMirror-wrap {
    background-color: #fff6f6;
    border-color: #e0b4b4;
  }

  .editor-toolbar {
    border-color: #e0b4b4;
  }
}

.ui.attached.tabular.menu {
  padding: 0 $space_huge;
}

.DfSearch {
  width: 450px;
  min-width: 320px;
  display: flex;

  .ant-input-search>.ant-input-group>.ant-input-group-addon {
    left: -1px;
    padding: 0;
    border: 0;
  }
  .ant-btn-icon-only {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
}

.DfBgColor {
  background-color: $color_page_bg;
}

.DfHeader {
  background: #fff;
  padding: 0 $space_normal;
  border-bottom: 1px solid $color_light_border;
  position: fixed;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: space-between;

  /* Fix black background of top menu in prod mode: */
  &.ant-layout-header {
    padding: 0 .5rem !important;
    background-color: #fff !important;
  }
}

.ant-layout {
  background-color: $color_page_bg !important;

  &.ant-layout-has-sider {
    margin-top: $height_top_menu;
  }
}

.DfDataList {
  margin-top: $space_tiny;

  .DfSegment {
    margin: $space_normal 0;
  }

  .ant-list-pagination {
    display: flex;
    justify-content: center;
  }
}

.DfEmpty {
  padding: $space_big;
}

.DfTitle--List {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.DfSideMenu--FollowedSpaces {
  .SpaceMenuIcon {
    margin-left: -$space_mini;
  }

  &.collapsed {
    .MenuItemName {
      display: none;
    }
  }

  color: #666;
  cursor: pointer;

  .ant-menu-item-group-title {
    text-align: center;
    text-transform: uppercase;
    font-size: $font_small
  }
}

.DfSider {
  background: #fff;
  border-right: 1px solid $color_light_border;
  overflow-y: auto;
  height: 100%;
  left: 0;

  .ant-menu-item:not(:last-child) {
    margin-bottom: 4px;
  }

  .ant-badge {
    margin-left: $space_mini;
  }
}

.ant-layout-sider-children {
  width: inherit;
  border-right: 1px $color_light_border solid;
  position: fixed;
}

.ant-list-something-after-last-item .ant-spin-container>.ant-list-items>.ant-list-item:last-child {
  border: none;
}

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

.DfTopBar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .DfSearchIcon {
    padding: $space_tiny;
    font-size: 1.3rem;
  }

  .DfCloseSearchIcon {
    font-size: 1.3rem;
    padding-left: $space_tiny;
  }
  .DfTopBar--leftContent,.DfTopBar--rightContent, .DfTopBar--search {
    display: flex;
    align-items: center;
  }
}


/* Fix syntax error in Markdown editor */
.CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
  background: none !important;
}

// a.DfStatItem {
//   color: $color_muted !important;
// }

.DfStatItem {
  color: $color_muted !important;
  font-size: $font_normal;
  margin-right: $space_large;
  display: inline-block;

  &:hover {
    color: $color_link !important;
  }
}

.DfSpaceTitle {
  margin-bottom: $space_small;

  a {
    @extend .DfBlackLink;
  }

  .ui.dropdown {
    margin-left: $space_tiny;
  }
}

.DfModal {
  text-align: left;
  margin: 1rem;

  content {
    min-width: 75%;
  }
}

.NavEditorWrapper {
  display: flex;
  justify-content: space-between;
}

.NavigationEditor .NERow {
  display: flex;
  justify-content: space-between;
  margin-left: 0;
  margin-bottom: $space_big;
  position: relative;
  flex-direction: column;
  border-bottom: 1px solid $color_light_border;
}

.NavigationEditor .NERow:last-child {
  border-bottom: none;
}

.NavigationEditor .NEText {
  color: $color_font_normal;
  font-style: normal;
  font-weight: 500;
  font-size: $font_normal;
  margin-right: $space_huge;
  width: 16rem;
  margin-top: $space_big;
}

.NavigationEditor .NavigationEditorForm {
  display: flex;
  flex-direction: column;
}

.NavigationEditor .NavigationEditorForm input,
.NavigationEditor .NavigationEditorForm select {
  margin-right: $space_huge !important;
  height: 3rem !important;
}

.NavigationEditor .NESelectType {
  width: 50%;
}

.NavigationEditor .NavigationEditorForm .NEHidden {

  input,
  select {
    color: $color_muted !important;
  }
}

.NavigationEditor .NEButtonsWrapper {
  display: flex;
  flex-direction: column;
  margin: $space_huge 0;
}

.NavigationEditor .NERemoveButton button:hover {
  background-color: #ff0000;
  border-color: #d9d9d9;

  span {
    color: #fff;
  }
}

.NavigationEditor .NEHideButton {
  margin-bottom: $space_normal;

  button {
    margin-right: $space_huge;
  }
}

.NavigationEditor .NEAddTab {
  @extend .DfLinkOnHover;
  background-color: #fff;
  display: flex;
  border-radius: 0.28571429rem;
  line-height: 1.21428571rem;
  padding: 0.67857143rem 1rem;
  max-width: 15.2rem;
  width: 100%;
  justify-content: center;
  border: 1px dashed #d9d9d9;
}

.NavigationEditor .NESubmit {
  max-width: 8.5rem;
  width: 100%;

  span {
    color: #fff !important;
  }
}

.NavigationEditor .NETagsWrapper {
  width: 100%;

  input {
    height: $space_big !important;
  }
}

.NavigationEditor .NEErrorMessage {
  position: absolute !important;
  top: 5.5rem;
  left: 6rem;
}

.NavigationEditor .NEAutoCompleteItem {
  position: absolute;
}

.RNTListItem {
  padding: 0 $space_normal;

  &:hover {
    background-color: #eee;
    border-radius: $border_radius_normal;
  }

  .ant-list-item-meta-title {
    font-weight: bold !important;
  }
}

.RNTIcon {
  transform: rotate(90deg);
  margin-right: $space_normal;
  color: #ccc;
}

.SpaceNav {
  .SNhead {
    display: flex;
    flex-direction: column;
    padding: $space_big;
    background-color: #fff;
    border: 1px solid $color_light_border;
    box-sizing: border-box;
    border-radius: $border_radius_normal;
    margin: 0 0 $space_big 0;
    padding: $space_big;

    .SNavatar {
      margin: auto;

      img {
        width: 100%;
        border-radius: 10rem;
      }
    }

    .SNheadTitle {
      font-weight: 500;
      font-size: $font_big;
      line-height: $space_huge;
      margin: $space_normal 0;
      text-align: center;
    }

    .SNheadDescription {
      margin-top: $space_normal;
    }

    .SNheadButton {
      margin: auto;

      &.unfollowed span {
        color: #fff;
      }
    }
  }

  .SNmenu {
    border: 1px solid $color_light_border;
    box-sizing: border-box;
    border-radius: $border_radius_normal;
    margin-bottom: $space_big;
    width: 100% !important;
  }

  .SpaceNavSettings {
    display: flex;
    justify-content: flex-end;
    margin: $space_tiny;

    a {
      @extend .DfBlackLink;
    }
  }
}

.DfNotificationItem {
  display: flex;
  width: 100%;
  color: $color_font_normal;
  min-height: 60px;

  .DfNotificationContent {
    margin: 0 $space_small;
    width: inherit;
  }

  a {
    @extend .DfBlackLink;
    font-weight: bold;
  }

  &:hover {
    cursor: pointer;
  }
}

.DfStep {

  button,
  a {
    padding: 0;
    font-size: $font_normal;
    font-weight: bolder;
    color: #222
  }
}

.ant-steps-item-title {
  font-size: $font_normal;
}

.DfAddressInfo {
  text-align: left;
  width: 100%;
}

.DfChooseAccount {
  display: flex;

  .DfAddressInfo {
    display: block
  }
}

.SelectAccountSection {
  max-height: 16rem;

  .SelectAccountItem {
    padding: $space_tiny;
    padding-left: $space_normal;
    cursor: pointer;
    height: 'auto';

    .DfDisabled {

      .ant-btn-disabled,
      .ant-btn.disabled,
      .ant-btn[disabled] {
        cursor: default;
        border: none;
        background-color: none;
      }

    }
  }

  .SelectAccountItem:hover {
    background-color: $color_hover_selectable_bg;
    color: $color_link;
  }
}

.DfCurrentAddress {
  display: flex;
  cursor: pointer;
  margin: 0 1rem;

  .DfAddressIcon {
    .ui--IdentityIcon {
      display: block;
    }
  }

  .DfAddressInfo {
    display: flex;
    flex-direction: column;
    line-height: normal;
    padding: $space_tiny;
    padding-top: .85rem;
    padding-left: 0;

    a {
      @extend .DfBlackLink;
    }

    .anticon-caret-down {
      margin-left: $space_tiny;
    }
  }
}

.DfError {
  color: red
}

.DfNewComment {

  .ant-comment-inner {
    padding-top: 0;
    padding-bottom: 0;

    /* &:hover {
      button {
        // color: $color_font_normal;
      }
    } */
  }

  .ant-comment-avatar {
    display: none;
  }

  .ant-comment-actions {
    margin-top: $space_mini;
    margin-bottom: $space_tiny;

    li {

      span,
      button {
        font-size: $font_small;
        // color: $color_muted;
      }

      button,
      button:hover,
      button:active,
      button:focus {
        cursor: pointer;
        background: transparent;
        border: none;
        @extend .DfNoBoxShadow;
        // color: $color_link;
      }
    }
  }

  .ant-comment-content-author-name {
    font-size: $font_small;
    line-height: inherit;

    .DfAuthorBlock {
      display: flex;

      .anticon-ellipsis.ant-dropdown-trigger {
        margin-left: $space_big;
      }
    }
  }

  .ant-comment-nested {
    box-shadow: -1px 0 0 rgba(34, 36, 38, .15);
    margin-left: $space_normal;
    padding-left: $space_normal;
  }

  .DfActionButtonsBlock {
    margin: $space_tiny 0;
  }
}

.anticon-ellipsis.ant-dropdown-trigger {
  font-size: $font_normal + 0.25rem;
}

.DfCommentSection {

  &.TopBorder {
    border-top: 1px solid $color_light_border;
  }

  margin-bottom: $space_normal;

  h3 {
    margin: $space_small 0;
  }

  .DfActionButtonsBlock {
    margin: $space_small 0;
  }
}

.DfCommentAction {
  cursor: pointer;
  color: $color_muted;

  &:hover {
    color: $color_link !important;
  }
}

.DfPanel {
  margin: 0 $space_normal;
  width: $width_panel;
}

.DfCard {
  display: flex;
  flex-direction: column;
  padding: $space_normal;
  margin: $space_small;
  background-color: #fff;
  border: 1px solid $color_light_border;
  box-sizing: border-box;
  border-radius: $border_radius_normal;

  &.active {
    border-color: $color_link
  }
}

.DfMobileOnBoarding {
  @extend .DfBoxShadow;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  line-height: 0.6rem;
  padding: 1rem;
}

.DfButtonAsMenuItem {
  color: inherit !important;
  padding-left: 0 !important;
  transition: none !important;
  -webkit-transition: none !important;
}

.DfSignInModal {
  .ant-divider-inner-text:first-of-type {
    margin-top: 0;
    padding-top: 0;
  }

  .ant-divider-inner-text {
    color: $color_muted;
    font-size: $font_normal;
  }

  .ant-modal-body {
    padding: 0;
  }
}

.DfAccountMenu {
  .ant-drawer-body {
    padding-left: 0;
    padding-right: 0;
  }
}

.DfActivityMsg {
  color: $color_font_normal !important;
}