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

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

:root {
  --welcome-message-font-family: var(--default-font-family);
  --welcome-message-title-font-size: 34px;
  --welcome-message-hint-background-color: color-mod(
    var(--color-info) alpha(10%)
  );
  --welcome-message-hint-font-size: var(--default-font-size);
  --welcome-message-subtitle-font-size: var(--default-font-size);
  --welcome-message-subtitle-color: color-mod(#000 alpha(50%));
  --welcome-message-horizontal-padding: 20px;
}

/* Styles */
.container {
  all: initial;
  display: block;
  font-family: var(--welcome-message-font-family);
  box-sizing: border-box;
  padding: 10rem var(--welcome-message-horizontal-padding)
    var(--welcome-message-horizontal-padding);
}

.hint {
  padding: var(--default-padding) calc(var(--default-padding-small) * 2);
  background-color: var(--welcome-message-hint-background-color);
  border-radius: 4px;
  margin-bottom: 2rem;
}

.hintText {
  font-size: var(--welcome-message-hint-font-size);
  line-height: 1.4;
  letter-spacing: -0.25px;
}

.title {
  margin: 0 0 12px;
  font-size: var(--welcome-message-title-font-size);
  line-height: 40px;
  letter-spacing: -0.485714px;
}

.subtitle {
  margin: 0;
  font-size: var(--welcome-message-subtitle-font-size);
  color: var(--welcome-message-subtitle-color);
  line-height: 20px;
  letter-spacing: -0.355556px;
}

.actions {
  margin-top: 18px;
}

.created {
  composes: subtitle;
  margin-top: 16px;
}

.createdText {
  margin-right: calc(var(--default-padding-small) / 2);
}

.createdDate {
  margin-left: calc(var(--default-padding-small) / 2);
}

.about {
  display: block;
  margin-top: 16px;
}

.user {
  & .hintText {
    margin-bottom: 20px;
  }

  & .subtitle {
    margin-left: -4px;
  }
}