@import "../../settings/variables";
@import "./file_explorer";

$toolbar-padding-top: spacing(xl);
$toolbar-padding-bottom: spacing(md);
$toolbar-height: $input-height + $toolbar-padding-top + $toolbar-padding-bottom;
$content-height: $modal-body-height - $toolbar-height;

:export {
  toolbarHeight: $toolbar-height;
}

.grid {
  &--empty {
    height: 100%;
  }

  &__empty-state {
    margin-top: 0;
    margin-bottom: 0;

    img {
      width: 160px;
    }
  }

  &__spinner {
    height: $content-height;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__search {
    width: 286px;
    flex-shrink: 1;
    min-width: 180px;
  }

  &__toolbar {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: $content-width;
    height: $toolbar-height;
    padding: $toolbar-padding-top spacing(xl) + spacing(lg)
      $toolbar-padding-bottom spacing(xl);

    &--align-right {
      justify-content: flex-end;
    }

    &--scrolled {
      box-shadow: 0px spacing(xs) spacing(xs) $core-gray-90;
      z-index: 1;
    }

    & > * + * {
      margin-left: spacing(sm);
    }
  }
}

.stretched {
  @include stretched;
}