@import "base";

.upload-results {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;

  .upload-results__title {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: solid 1px color(black, bright);
  }

  .upload-results__container {
    flex: 1;
    min-width: 500px;
    min-height: 300px;
    display: flex;
    align-items: stretch;
  }

  .upload-results__menu-container {
    margin: 10px;
    overflow: auto;
  }

  .upload-results__menu-icon {
    @include circle(10px);
    color: color(white);
    display: flex;
    align-items: center;
    justify-content: center;

    &.upload-results__menu-icon_imported, &.upload-results__menu-icon_ready {
      background-color: color(primary);
    }

    &.upload-results__menu-icon_warning {
      background-color: color(attention);
    }

    &.upload-results__menu-icon_error {
      background-color: color(important);
    }
  }

  .upload-results__content-container {
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-items: stretch;
  }

  .upload-results__main-content {
    flex: 1;
    display: flex;
    align-items: stretch;
  }

  .upload-results__messages {
    flex: 2;
  }

  .upload-results__statistics {
    flex: 1;
    padding: 50px;
    overflow: auto;
  }

  .upload-results__statistics-switcher {
    display: flex;
    justify-content: space-around;
    height: 50px;
    align-items: center;
  }

  .upload-results__statistics-switcher-option {
    @extend %link;

    &.upload-results__statistics-switcher-option_selected {
      border-bottom: solid 1px color(primary, light);
      font-weight: bold;
    }
  }

  .upload-results__content-title {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .upload-results__upload-button {
    display: flex;
    position: relative;
    justify-content: flex-end;
  }

  .upload-results__import-button {
    display: flex;
    justify-content: flex-start;
    padding: 10px;
  }

  .upload-results__actions {
    display: flex;
    justify-content: center;

    .upload-results__actions__button-container {
      display: flex;
      flex: 1;
      margin: 0 6px;

      &.upload-results__actions__button-container__reverse {
        justify-content: flex-end;
      }
    }
  }

  .upload-results__message {
    padding: 10px;
    margin-bottom: 20px;

    .upload-results__message-title {
      display: flex;
      align-items: baseline;
      padding-bottom: 20px;

      .upload-results__message-title-icon {
        padding: 0px 10px;
        font-size: 20px;
      }
    }

    .upload-results__message-information {
      padding-left: 40px;
      color: color(black, light)
    }

    .upload-results__message-action {
      display: flex;
      align-items: baseline;

      .upload-results__message-action-checkbox {
        padding-right: 10px;
      }

      .upload-results__message-action-label {
        padding-right: 10px;
      }

      &.upload-results__message-action_checked {
        .upload-results__message-action-checkbox {
          color: color(primary);
        }

        .upload-results__message-action-label {
          color: color(primary);
        }
      }

      &.upload-results__message-action_unchecked {
        .upload-results__message-action-label {
          color: color(attention);
        }
      }

      &.upload-results__message-action_discarded {
        .upload-results__message-action-label {
          color: color(black, bright);
        }
      }

      &.upload-results__message-action_editable {
        @extend %link;
      }
    }

    @mixin upload-results__message_status($color) {
      .upload-results__message-title-icon {
        color: $color;
      }
    }

    &.upload-results__message_error {
      @include upload-results__message_status(color(important));
    }

    &.upload-results__message_warning {
      @include upload-results__message_status(color(attention));
    }

    &.upload-results__message_ok {
      @include upload-results__message_status(color(primary));
    }
  }
}