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

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

:root {
  --sidebar-unread-font-family: var(--default-font-family);
  --sidebar-unread-default-height: 4px;
  --sidebar-unread-hover-height: 18px;
  --sidebar-unread-color: #fff;
  --sidebar-unread-background-color: var(--color-primary);
  --sidebar-unread-hover-background-color: color-mod(
    var(--sidebar-unread-background-color) tint(10%)
  );
  --sidebar-unread-active-background-color: color-mod(
    var(--sidebar-unread-background-color) shade(5%)
  );
  --sidebar-unread-transition-duration: calc(
    var(--default-transition-duration) * 0.6
  );
}

/* Styles */
.container {
  all: initial;
  position: absolute;
  z-index: var(--z-index-sidebar-unread);
  right: 0;
  left: 0;
  height: var(--sidebar-unread-hover-height);

  &:hover {
    & .wrapper {
      height: var(--sidebar-unread-hover-height);
      background-color: var(--sidebar-unread-hover-background-color);
    }

    & .icon {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }

  &:active {
    & .wrapper {
      background-color: var(--sidebar-unread-active-background-color);
    }

    & .icon {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }
}

.wrapper {
  height: var(--sidebar-unread-default-height);
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  transform: translateZ(0);
  transition: height var(--sidebar-unread-transition-duration) ease-in-out,
    background var(--sidebar-unread-transition-duration) ease-in-out;
  background-color: var(--sidebar-unread-background-color);
  font-family: var(--sidebar-unread-font-family);
  align-content: center;
  align-items: center;
  justify-content: center;
  @mixin no-select;
  cursor: pointer;
}

.top {
  top: 0;

  & .wrapper {
    top: 0;
  }

  & .icon {
    transform: scale(0.7) translateY(-10px);
  }

  &:active {
    & .icon {
      transform: translateY(-1px);
    }
  }
}

.bottom {
  bottom: 0;

  & .wrapper {
    bottom: 0;
  }

  & .icon {
    transform: scale(0.7) translateY(10px);
  }

  &:active {
    & .icon {
      transform: translateY(1px);
    }
  }
}

.icon {
  transition: opacity var(--sidebar-unread-transition-duration) ease-in-out,
    transform var(--sidebar-unread-transition-duration) ease-in-out;
  opacity: 0;
  color: var(--sidebar-unread-color);
}