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

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

:root {
  --modal-admin-font-family: var(--default-font-family);
  --modal-admin-width: 500px;
  --modal-admin-hint-font-size: var(--default-font-size-small);
  --modal-admin-hint-color: var(--default-font-color-light);
  --modal-admin-back-transition-duration: var(--default-transition-duration);
  --modal-admin-back-color: color-mod(#000 alpha(40%));
  --modal-admin-back-color-hover: color-mod(#000 alpha(60%));
}

/* Styles */
.container {
  font-family: var(--modal-admin-font-family);
  width: var(--modal-admin-width);
}

.body {
  padding: 0;
}

.list {
  padding: 0;
  min-height: 300px;
}

.avatar {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-right: 16px;
}

.info {
  @mixin flex-fix;
}

.back {
  margin-right: 16px;
  transition: color var(--modal-admin-back-transition-duration) linear;
  color: var(--modal-admin-back-color);

  &:hover {
    color: var(--modal-admin-back-color-hover);
  }
}

.user {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  padding: 1rem 32px 0.5rem;
}

.title {
  font-size: 22px;
  font-weight: 500;
}

/* .switcher {} */

.form {
  padding: 16px 32px;
}

.formButton {
  padding: 0;
}

.footer {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-flow: row nowrap;
}

.footerButton {
  flex: 1 1 auto;
  @mixin flex-fix;
}

.fieldset {
  padding-bottom: 1.5rem;

  &:last-child {
    padding-bottom: 1rem;
  }
}

.switcherWrapper {
  margin-bottom: 14px;

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

.hint {
  font-family: var(--modal-admin-font-family);
  padding-top: 6px;
  padding-left: 46px;
  cursor: default;
  user-select: none;
  font-size: var(--modal-admin-hint-font-size);
  line-height: 1.3;
  color: var(--modal-admin-hint-color);
}

.error {
  padding: 12px 32px;
  color: #fff;
  background-color: var(--color-danger);
}