@import 'app/city-map/config';
@import "./app/theme.scss";
@include mat-core();
@include angular-material-theme($coderadar-theme);

/**
General styles
 */

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  background-color: ghostwhite;
  display: grid;
  grid-template-rows: 1fr 80px;
  min-height: 100vh;
  position: relative;
}

footer {
  bottom: 0;
  color: white;
  display: flex;
  grid-row: 2;
  position: absolute;
  width: 100%;
  height: 80px;
}

/*
Styles for most forms in the app
 */

.mat-card-form #cardContainer {
  margin-top: 2%;
  margin-bottom: 5%;
}

.mat-card-form mat-card {
  width: 400px;
}

.mat-card-form mat-card-header {
  justify-content: center;
}

.mat-card-form mat-card-title > span {
  font-size: 20pt;
}

.mat-card-form #cardButtons {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mat-card-form #cardButtons button {
  width: 25%;
  margin: 10px;
}

.waitingIndicator {
  position: absolute !important;
  margin-top: 20%;
  margin-left: calc(50% - 50px);
  z-index: 5;
}

.dark-overlay{
  background-color: rgba(0,0,0,0.4);
  position: fixed;
  top: 0;
  left:0;
  width: 100%;
  z-index: 3;
  min-height: calc(100vh);
}


/*
Styles for the login and register forms
 */


.login-card-form mat-card-header {
  justify-content: center;
}

.login-card-form mat-card-title > span {
  font-size: 30pt;
}

.login-card-form mat-card {
  position: fixed;
  top: 20%;
  min-width: 22%;
}

.login-card-form #cardButtons {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card-form #cardButtons button {
  margin: 10px;
}


.login-card-form form {
  min-width: 22%;
}

#stage canvas {
  position: absolute;
  cursor: -webkit-grab;
  transition: all 1s ease
}

#stage canvas:first-child {
  left: 0
}

#stage canvas:last-child {
  opacity: 0;
  left: 100%
}

#stage.split canvas:last-child {
  opacity: 1;
  left: 50%
}

.dropdown-menu {
  padding: 1.25rem
}

.ngui-auto-complete > ul {
  min-width: 100%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
  white-space: nowrap;
  max-height: 250px
}

.ngui-auto-complete > ul li {
  cursor: pointer;
  padding: 10px 15px !important;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis
}

.ngui-auto-complete > ul li.selected {
  color: #000;
  background-color: #f3f3f3 !important
}

.ngui-auto-complete > ul li:hover {
  color: #000;
  background-color: #f3f3f3 !important
}

#stage {
  canvas {
    position: absolute;
    cursor: -webkit-grab;
    transition: all 1s ease;

    &:first-child {
      left: 0;
    }

    &:last-child {
      opacity: 0;
      left: 100%;
    }
  }

  &.split {
    canvas:last-child {
      opacity: 1;
      left: 50%;
    }
  }
}

.dropdown-menu {
  padding: 1.25rem;
}

/* Overwrite styles of ng2-auto-complete */
.ngui-auto-complete {
  width: auto;

  & > ul {
    min-width: 100%;
    box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
    white-space: nowrap;
    max-height: 250px;

    & li {
      cursor: pointer;
      padding: 10px 15px !important;
      max-width: 500px;
      overflow: hidden;
      text-overflow: ellipsis;

      &.selected {
        color: $state-active-color;
        background-color: $state-hover-color !important;
      }

      &:hover {
        color: $state-active-color;
        background-color: $state-hover-color !important;
      }
    }
  }
}

.mat-progress-spinner-indeterminate-animation {
  /* keep anim slow to avoid wobble from rounding errors */
  animation-duration: 9s !important;
}

.mat-progress-spinner-indeterminate-animation circle {
  animation-name: progress-spinner-stroke-rotate !important;
  animation-timing-function: linear !important;
  animation-duration: 4s !important;
}

@keyframes progress-spinner-stroke-rotate {
  $start: 200%; /* approx 2/3 of circle circumference */
  $end: 20%;
  0%   { stroke-dashoffset: $start; }
  50%  { stroke-dashoffset: $end; }
  /* removing transform: rotate(720deg) causes wobble */
  100% { stroke-dashoffset: $start; transform: rotate(720deg); }
}
