@import '~scss/variables';

$header-height: 144px;
$toolbar-height: 44px;

.apps {
  position: relative;
  height: calc(100vh - #{$header-height} - #{$toolbar-height});
  padding: 50px 20px 20px;
  overflow-y: auto;

  .appItem {
    width: calc(33.3% - 8px);
    margin-bottom: 12px;
    margin-right: 12px;
  }
}

.header {
  height: $header-height;
  background-color: $bg-color;

  .logo {
    position: absolute;
    width: 230px;
    height: 218px;
    z-index: 2;
  }
  .text {
    padding-top: 32px;
    padding-left: 250px;
    padding-right: 52px;
    > h2 {
      font-size: 20px;
      font-weight: 500;
      line-height: 28px;
      color: $dark-color07;
      text-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.1);
      margin-bottom: 12px;
    }
    > p {
      font-size: $size-small;
      line-height: 20px;
      color: $dark-color01;
    }
  }
}

.toolbar {
  display: flex;
  justify-content: flex-end;
  position: relative;
  height: 44px;
  padding: 6px 20px;
  border: 1px solid $border-color;
  background-color: $lightest;
  box-shadow: $base-shadow;

  .selectRepos {
    margin-right: 12px;
    width: 216px;
  }

  .search {
    margin-right: 12px;
    :global {
      input {
        width: 503px;
      }
    }
  }
}
