// App page ------------------------------

.left-bar {
  flex: 0;

  @include breakpoint(md) {
    min-width: 300px;
    flex: 0.4;
    max-width: 400px;
    padding-right: 32px;
  }
}

.app-header {
  display: flex;
  flex-direction: row;

  .app-logo {
    display: block;
    max-width: 96px;
    height: 96px;
    margin-right: 32px;

    @include breakpoint(md) {
      margin: 0 auto;
    }
  }

  .app-link {
    &:hover {
      color: inherit;
      text-decoration: none;
    }
  }

  .app-title {
    position: relative;
    flex: 1;

    .app-name {
      margin: 0;
      color: inherit;
      font-size: 2em;
      line-height: 1.1;
    }

    .app-description {
      margin: 0.3em 0 0 0;
      font-size: 1.2em;
      font-weight: 300;
      line-height: 1.4;
    }
  }
}

.app-container {
  margin-top: 32px;

  @include breakpoint(md) {
    display: flex;
  }

  .app-meta {
    display: flex;
    flex-wrap: wrap;

    &.sticky {
      @include breakpoint(md) {
        position: sticky;
        top: 20px;
      }
    }

    @include breakpoint(md) {
      flex-direction: column;
      flex-wrap: nowrap;
    }

    .app-meta-entry {
      font-size: 14px;
      padding: 16px 0;
      border-top: 1px darken($main-bg-color-shade, 8%) solid;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &-downloads {
        overflow: auto;
        white-space: normal;
      }

      @include breakpoint(sm) {
        width: 50%;
      }

      @include breakpoint(md) {
        width: 100%;
      }

      &:nth-child(1) {
        border-top: none;
      }

      &:nth-child(2) {
        border-top: 1px darken($main-bg-color-shade, 8%) solid;

        @include breakpoint(sm) {
          border-top: none;
        }

        @include breakpoint(md) {
          border-top: 1px darken($main-bg-color-shade, 8%) solid;
        }
      }

      h5 {
        font-size: 14px;
        -webkit-font-smoothing: antialiased;
      }
    }
  }

  .app-boxes {
    flex: 1;

    @include breakpoint(md) {
      max-width: calc(100% - 300px);
    }

    .app-box {
      border: 1px solid $main-border-color;
      border-radius: 5px;
      box-shadow: 0 0 16px -4px rgba(0, 0, 0, 0.28);
      margin-bottom: 32px;

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

  .app-keyword {
    padding: 0.2em 0.4em;
    font-size: 0.85em;
    border-radius: 3px;
    background-color: $main-bg-color-shade;
    white-space: normal;
    overflow: auto;

    &:hover {
      text-decoration: none;
      background-color: darken($main-bg-color-shade, 4%);
    }
  }

  .app-tagname {
    margin-left: 0.5em;
    color: $main-color-subtle;
  }

  .app-download {
    display: block;
    padding: 0.4em 0.8em;
    border-radius: 3px;
    margin: 0 0.5em 0.5em 0;
    line-height: 1.7;
    border: none;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    direction: rtl;
    text-align: left;
    color: white !important;

    @include breakpoint(md) {
      display: inline-block;
    }

    &:hover {
      text-decoration: none;
      border-color: lighten($main-link-color, 20%);
    }
  }

  .app-readme {
    padding: 3rem;

    > div > article > *:first-child {
      margin-top: 0 !important;
    }

    .octicon-link {
      display: none;
    }
  }

  .app-video-container {
    iframe {
      width: 100%;
      height: 100%;
    }
  }

  .app-screenshots {
    .active-screenshot {
      padding: 16px;
    }

    .all-screenshots {
      height: 128px;
      border-top: 1px solid $main-border-color;
      white-space: nowrap;
      overflow-y: auto;

      .app-screenshot-thumb {
        border-right: 1px solid $main-border-color;
        display: inline-flex;
        flex-direction: column;
        width: 196px;
        cursor: pointer;
        overflow: hidden;

        /* Scroll bug in Chrome */
        height: 126px;

        img {
          height: 110px;
          margin: 8px;

          &.caption {
            height: 84px;
          }
        }

        .app-screenshot-caption {
          text-align: center;
          text-overflow: ellipsis;
          overflow: hidden;
          padding: 0 8px;
        }
      }
    }
  }
}

.center {
  text-align: center;
}

.force-150 {
  @media (min-width: 544px) {
    min-height: 150px;
    max-height: 150px;
    height: 150px;
    overflow: auto;
  }
}

.invisible {
  opacity: 0;

  @media (max-width: 543px) {
    display: none;
  }
}

.something-missing {
  margin-top: 32px;
}

// basecoat filter-list overrides

.filter-list {
  padding: 0;
  margin: 0;
}

@media (max-width: 700px) {
  .categories-filter {
    display: none !important;
  }
}

.filter-item {
  padding: 4px 8px;
}

.darwin-only,
.win32-only,
.linux-only {
  display: none;
}

.app-download-input {
  margin-top: 4px;
  display: block;
}

// mobile handle, use breakpoint from /bower_components/basecoat/scss/mixins/_breakpoints.scss
.container-narrow {
  padding-right: 15px;
  padding-left: 15px;

  @include breakpoint(md) { // return normal value
    padding-right: 0;
    padding-left: 0;
  }
}

.row { // default is -15px
  margin-right: -12px; // work with .page-section { padding: 12px }
  margin-left: -12px;
}

.mobile-hidden {
  display: none !important;

  @include breakpoint(md) {
    display: block !important;
  }
}

.topic-tag {
  background-color: #f1f8ff;
  border-radius: 3px;
  display: inline-block;
  margin: 0 0.5em 0.5em 0;
  padding: 0.3em 0.9em;
  white-space: nowrap;
}

.topic-tag-link:hover {
  background-color: #def;
  text-decoration: none !important;
}

.topic-tag-outline {
  background: #fff;
  box-shadow: inset 0 0 0 1px #c8e1ff;
}

/* Listed Apps with Icons */

$app-list-icon-size: 48px;

.app-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.listed-app {
  text-align: left;
}

// Override .filterable-list
.listed-app.listed-app {
  padding: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.listed-app > a {
  display: flex;
  padding: 10px;
  border: 1px solid transparent;
}

.listed-app > a:hover,
.listed-app > a:focus {
  text-decoration: none;
  border-color: $main-border-color;
  background-color: $main-bg-color-shade;
  outline: none;
}

.listed-app-logo-wrapper {
  display: inline-block;
  width: $app-list-icon-size;
  height: $app-list-icon-size;
  position: relative;
}

// TODO(HashimotoYT): RFC: Design review.
.listed-app-logo-placeholder {
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border-radius: 50%;
  margin: 0;
  padding: 0;
  z-index: 1;
}

.listed-app-logo {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 48px;
  height: 48px;
  z-index: 2;
}

.listed-app-name {
  padding: 0 10px;
  font-weight: 500;
}

.listed-app-description {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listed-app-add-date,
.listed-app-release-date {
  font-size: 12px;
  padding-left: 15px;
  display: none;
}

.listed-app:hover .listed-app-add-date,
.listed-app:hover .listed-app-release-date {
  display: inherit;
}

.listed-app span {
  line-height: $app-list-icon-size;
  vertical-align: bottom;
}
