// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "../../common/variables";
@import "../../common/mixins";

.#{$ns}-non-ideal-state {
  @include pt-flex-container(column, $pt-spacing * 5);
  align-items: center;
  color: $pt-text-color-muted;
  height: 100%;
  justify-content: center;
  text-align: center;
  width: 100%;

  > * {
    max-width: $pt-spacing * 100;
  }

  .#{$ns}-heading {
    color: $pt-text-color-muted;
    line-height: $pt-spacing * 5;
    margin-bottom: $pt-spacing * 2;

    &:only-child {
      margin-bottom: 0;
    }
  }

  &.#{$ns}-non-ideal-state-horizontal {
    @include pt-flex-container(row, $pt-spacing * 5);
    text-align: left;

    // We need to override the pt-flex-container() styles on the default vertical layout of this
    // component with this universal selector. A better approach would be to only apply pt-flex-container(column, ...)
    // on the .#{$ns}-non-ideal-state-vertical class, but we cannot do that without a CSS breaking change.
    > * {
      margin-bottom: 0;
    }
  }

  .#{$ns}-dark & {
    color: $pt-dark-text-color-muted;

    .#{$ns}-heading {
      color: $pt-dark-text-color-muted;
    }
  }
}

.#{$ns}-non-ideal-state-visual {
  color: $gray3;
}