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

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

:root {
  --sidebar-header-font-family: var(--default-font-family);
  --sidebar-header-height: 60px;
  --sidebar-header-background-color: #fff;
  --sidebar-header-padding-top: 10px;
  --sidebar-header-padding-right: 12px;
  --sidebar-header-padding-bottom: 10px;
  --sidebar-header-padding-left: 12px;
  --sidebar-header-menu-color: color-mod(#000 alpha(80%));
  --sidebar-header-menu-font-size: var(--default-font-size-large);
  --sidebar-header-plus-color: var(--indigo);
}

.container {
  all: initial;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  min-height: var(--sidebar-header-height);
  padding-top: var(--sidebar-header-padding-top);
  padding-right: var(--sidebar-header-padding-right);
  padding-bottom: var(--sidebar-header-padding-bottom);
  padding-left: var(--sidebar-header-padding-left);
  font-family: var(--sidebar-header-font-family);
  align-content: center;
  align-items: flex-start;
  justify-content: flex-start;
}

.menu {
  display: inline-flex;
  flex-direction: row;
  cursor: pointer;
  user-select: none;
  letter-spacing: -0.3px;
  font-size: var(--sidebar-header-menu-font-size);
  font-weight: 500;
  line-height: calc(
    var(--sidebar-header-height) - var(--sidebar-header-padding-top) -
      var(--sidebar-header-padding-bottom)
  );
  color: var(--sidebar-header-menu-color);
  justify-content: flex-start;
  align-content: center;
  align-items: center;
}

.logo {
  width: 30px;
  height: 30px;
  margin-right: 14px;
  margin-left: 2px;
  line-height: 0;
}

/* .appName {} */

.arrow {
  margin-left: -2px;
  cursor: inherit;
  color: var(--sidebar-header-menu-color);
}

.plusWrapper {
  display: inline-flex;
  height: calc(
    var(--sidebar-header-height) - var(--sidebar-header-padding-top) -
      var(--sidebar-header-padding-bottom)
  );
  align-content: center;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
}

.plus {
  transition: all var(--default-transition-duration) ease-in;
  transform-origin: 50% 50%;
  color: var(--sidebar-header-plus-color);

  &:hover {
    opacity: 0.8;
  }

  &:active {
    opacity: 0.9;
  }
}

.plusActive {
  transform: rotate(90deg);
}