@import 'base';

.statistics {
  @extend %block;
  background-color: color(black, translucent);
  flex: 1;
  overflow: scroll;
  padding: 0 5%;
  position: relative;

  $recruiter-picker-height: 40px;
  $multiple-figures-height: 150px;

  &__title {
    padding-top: 10px;
    font-size: 24px;
    color: color(black, light);
  }

  &__content {
    display: flex;
    justify-content: space-between;
  }

  &__content_narrow {
    flex-direction: column;
    align-items: stretch;
    width: 90%;

    .statistics__agency, .statistics__recruiter {
      display: flex;
      align-items: stretch;
      flex-direction: column;
      width: auto;
    }
  }

  &__recruiter-picker {
    height: $recruiter-picker-height;

    select {
      background-color: color(primary);
      color: white;
      border-style: none;
      height: 30px;
    }
  }

  &__agency {
    margin-top: $recruiter-picker-height;
  }

  &__agency, &__recruiter {
    width: 45%;
  }

  &__pane {
    background-color: white;
    padding: 10px;
    margin-bottom: 20px;
    box-shadow: 0 4px 4px color(black, bright);

    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 35px;

      &-title {
        padding-left: 10px;
        font-size: 16px;
        color: color(black, light);
      }
    }
  }

  &__users {
    height: $multiple-figures-height;
    display: flex;
    justify-content: center;
    flex-direction: column;

    &-status {
      display: flex;
      align-items: center;
      margin: 5px 0;

      &-icon {
        width: 50px;
        display: flex;
        justify-content: center;
      }

      &-count {
        width: 50px;
        text-align: right;
        padding-right: 10px;
      }
    }
  }

  @mixin single-figure($color) {
    display: flex;
    align-items: center;

    &-count {
      flex: 1;
      text-align: right;
      color: $color;
      padding-right: 20px;
      font-weight: 300;
      font-size: 50px;
    }

    &-label {
      flex: 2;
      padding-right: 10px;
    }
  }

  &__events {
    @include single-figure(color(primary));
  }

  &__messages {
    @include single-figure(color(attention));
  }

  &__missions {
    height: $multiple-figures-height;
    display: flex;
    flex-wrap: wrap;

    &-status {
      width: 50%;
      display: flex;
      align-items: center;

      &-count {
        width: 40%;
        font-size: 30px;
        font-weight: 300;
        text-align: right;
        margin-right: 20px;
      }

      @mixin mission-status($color) {
        .statistics__missions-status-count {
          color: $color;
        }
      }

      &.statistics__missions-status_current {
        @include mission-status(color(primary));
      }

      &.statistics__missions-status_assigned {
        @include mission-status(color(primary));
      }

      &.statistics__missions-status_sent {
        @include mission-status(color(primary, light));
      }

      &.statistics__missions-status_draft {
        @include mission-status(color(black, bright));
      }
    }
  }

  $navigation-height: 30px;

  &__time-table {
    border: solid 1px color(black, pale);
    display: flex;
    align-items: stretch;
    flex-direction: column;

    &-navigation {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      height: $navigation-height;

      &-button {
        $color: color(action);
        @include circle(20px);
        border: solid 1px $color;
        display: flex;
        justify-content: center;
        align-items: center;
        color: $color;
        @extend %link;
      }

      &-label {
        width: 250px;
        text-align: center;
      }
    }
  }

  &__navigation-placeholder {
    height: $navigation-height;
  }

  &__time-table-figure {
    display: flex;
    align-items: center;

    &-count {
      flex: 1;
      font-size: 30px;
      padding: 20px;
      text-align: right;
      font-weight: 300;

      &.statistics__time-table-figure-count_small {
        font-size: 20px;
      }
    }

    &-label {
      flex: 2;
      padding-right: 20px;
    }
  }

  &__users-time-table {
    display: flex;

    &-sent {
      flex: 1;
    }

    &-received {
      flex: 1;
    }
  }

  &__missions-time-table {
    display: flex;
    flex-wrap: wrap;

    &-figure {
      width: 50%;
    }
  }
}