@import "../../../scss/variables";

new-project-page {
  display: block;
  background-color: $site-bg-color-200;
  min-height: 100vh;

  .page-header {
    margin-top: 40px;

    .title {
      margin: 0;
    }

    .subtitle {
      color: $site-text-color-300;
      margin: 4px 0 0;
    }

    .controls {
      display: flex;
      align-items: center;
      margin-bottom: 40px;
      margin-top: 30px;

      @media only screen and (max-width: $medium) {
        display: block;

        .input-container {
          margin-bottom: 10px;
        }
      }
    }

    .input-container {
      flex: 1 1 auto;
      position: relative;
      max-width: 300px;

      .mat-icon {
        position: absolute;
        left: 8px;
        top: 15px;
        color: $icon-color-dark;
      }

      input, select {
        background-color: $site-bg-color-100;
        height: 52px;
      }
    }

    .search-input-container {
      margin-right: 10px;

      input {
        padding-left: 38px;
      }
    }

    .category-input-container {
      margin-right: 40px;
    }

    .blank-page-button {
      flex: 0 0 auto;
      line-height: 48px;
      margin-right: 10px;
    }
  }
  
  .content  {
    .ad-host-top {
      margin-top: 60px;
    }

    .ad-host-bottom {
      margin-bottom: 60px;
    }
  }

  .template-grid {
    padding-bottom: 60px;
  }

  .template-grid-item-footer {
    padding: 18px;
    text-align: center;
    text-transform: capitalize;
  }
}