@import "../settings/variables";

.l-list-page {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;

  &__main {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    min-width: 0;
    padding: spacing(lg) spacing(xl);
    width: 100%;
  }

  &__banner {
    flex: 0 0 auto;
  }

  &__tool-header {
    flex: 0 0 auto;
    padding-bottom: spacing(lg);
  }

  &__content-controls {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    padding: spacing(md) 0;

    &__control {
      flex: 0 0 auto;

      &--search {
        width: 240px;
      }

      &--block {
        flex: 1 0 auto;
      }

      &--align-right {
        margin-left: auto;
      }
    }

    &__control {
      & + & {
        margin-left: spacing(lg);
      }

      & + &--align-right {
        margin-left: auto;
      }
    }
  }

  &__body {
    display: flex;
    flex: 1 0 auto;
    padding: spacing(md) 0 0;

    &__content {
      flex: 1 1 auto;
    }
  }

  /* if banner comes before tool-header, we need some additional space */
  &__banner + &__tool-header {
    padding-top: spacing(lg);
  }

  /* always put lines between content-controls */
  &__content-controls + &__content-controls {
    border-top: 1px solid $core-gray-85;
  }

  /* always put lines between tool-header content-controls or body */
  &__tool-header + &__content-controls,
  &__tool-header + &__body {
    border-top: 1px solid $core-gray-85;
  }

  /* body shouldn't have padding if coming after content-controls */
  &__content-controls + &__body {
    padding: 0;
  }
}