/* Copyright (c) 2020, the Dart project authors.  Please see the AUTHORS file
   for details. All rights reserved. Use of this source code is governed by a
   BSD-style license that can be found in the LICENSE file. */

@use 'variables';

$info-box-width: 190px;
$info-box-margin:        120px;
$info-box-tablet-margin:  40px;
$info-box-total-width:       320px; /* 190 + 120 + 10 (extra space for layout) */
$info-box-table-total-width: 240px; /* 190 +  40 + 10 (extra space for layout) */
$detail-tabs-width:        calc(100% - 320px);
$detail-tabs-tablet-width: calc(100% - 240px);

.-wide-header-detail-page {
  .detail-header,
  .detail-tabs-wide-header {
    background: var(--pub-inset-bgColor);
    color: var(--pub-code-text-color);
  }

  .detail-header {
    // On desktop this will make the wide header block to be centered.
    @media (min-width: variables.$device-desktop-min-width) {
      display: flex;
    }
  }
}

.detail-wrapper {
  display: none;
  position: relative;

  &.-active {
    display: block;
  }

  .detail-info-box {
    @media (max-width: variables.$device-mobile-max-width) {
      display: none;
    }
  }

  &.-has-info-box {
    .detail-header-content-block {
      width: 100%;
    }
  }
}

.detail-banners {
  position: absolute;
  top: 0px;
  right: 0px;

  @media (min-width: variables.$device-desktop-min-width) {
    width: $info-box-width + 10px;
  }

  .ff-banner {
    display: none;
  }

  .ff-banner-desktop {
    @media (min-width: variables.$device-desktop-min-width) {
      display: inline-block;
      width: 75px;
      height: 109px;
    }
  }

  .ff-banner-mobile {
    @media (max-width: variables.$device-mobile-max-width) {
      display: inline-block;
      width: 47px;
      height: 58px;
    }
  }
}

.detail-header {
  padding: 30px 0 20px;

  .title {
    font-family: var(--pub-font-family-headline);
    margin: 0;
    font-size: 24px;

    @media (min-width: variables.$device-desktop-min-width) {
      font-size: 36px;
    }
  }

  &.-is-loose {
    padding-top: 64px;

    .title {
      padding-bottom: 10px;
    }
  }
}

.detail-lead {
  display: none;
  margin-top: 16px;

  @media (max-width: variables.$device-mobile-max-width) {
    display: block;
  }

  .detail-metadata-toggle-icon {
    float: right;
    font-size: 18px;
    width: 28px;
    height: 28px;
    text-align: center;
    cursor: pointer;
  }

  .detail-lead-title {
    font-size: 16px;
    margin: 0;
  }
}

.detail-lead-more,
.detail-lead-back {
  padding-right: 16px;
  text-align: right;
}

.detail-header {
  .detail-header-outer-block {
    display: flex;
  }

  .detail-header-image {
    border-radius: 50%;
    margin-right: 24px;

    max-width: 200px;
    max-height: 200px;

    @media (max-width: variables.$device-mobile-max-width) {
      max-width: 100px;
      max-height: 100px;
    }
  }

  .metadata {
    margin-bottom: 8px;
  }

  .detail-header-metadata-ref {
    display: flex;
    align-items: center;

    @media (min-width: variables.$device-desktop-min-width) {
      display: inline-flex;
      margin-right: 16px;
    }
  }

  .detail-header-metadata-ref-icon {
    width: 14px;
    height: 14px;
    margin-right: 8px;
  }

  .detail-tags-and-like {
    display: flex;
  }

  .detail-tags {
    flex-grow: 1;
  }
}

.like-button-and-label {
  font-family: var(--pub-font-family-body);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  margin-top: -4px;
  border: 1px solid transparent;
  padding: 2px;

  .like-button-and-label--button {
    /* Override wide material button styles*/
    width: 26px;
    height: 26px;
    padding: 4px;
    margin: 0 6px 0 0;
  }

  .like-button-and-label--count-wrapper {
    display: inline-block;
    padding-top: 6px;
  }

  &:focus-within {
    border-color: var(--pub-neutral-textColor);
  }
}

.detail-metadata {
  display: none;

  &.-active {
    display: block;
  }

  .title:first-child {
    &.pkg-infobox-metadata {
      display: none;
    }
  }

  .detail-metadata-title {
    font-size: 36px;
    margin: 8px 0;
  }

  .detail-info-box {
    margin: 0;
  }
}

.detail-screenshot-thumbnail {
  display: flex;
  height: 192px;
  width: 192px;
  margin-top: 10px;
  cursor: pointer;
}

.detail-screenshot-thumbnail {
  transition: 200ms filter;
}

.detail-screenshot-thumbnail:hover {
  filter: brightness(50%);
}

.weekly-downloads-sparkline {
  display: flex;
  height: 105px;
  width: 190px;
  flex-direction: column;
  margin-top: 10px;
}

.weekly-downloads-sparkline-text {
  font-family: monospace;
  font-size: 13px;
  color: var(--pub-weekly-chart-main-color);
  text-align: center;
}

.weekly-downloads-sparkline-tooltip {
  border-radius: 5px;
  margin: 0px;
  padding: 2px 8px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  color: var(--pub-weekly-chart-tooltip-text-color);
  background-color: var(--pub-weekly-chart-main-color);
  opacity: 1;
  z-index: 100000;
  position: absolute;
}

.weekly-sparkline {
  fill: var(--pub-weekly-chart-main-color);
}

.weekly-sparkline-bar {
  stroke: var(--pub-weekly-chart-main-color);
  stroke-width: 1.5;
}

.weekly-sparkline-line {
  fill: none;
  stroke: var(--pub-weekly-chart-main-color);
  stroke-width: 2;
}

.weekly-sparkline-area {
  stroke: var(--pub-weekly-chart-main-color);
  fill: var(--pub-weekly-chart-main-color);
  opacity: 0.3;
  stroke-width: 2;
}

@media (min-width: variables.$device-desktop-min-width) {
  .detail-body {

    >.detail-tabs {
      vertical-align: top;
    }

    >.detail-info-box {
      display: inline-block;
      margin-left: $info-box-margin;
      width: $info-box-width;

      @media (max-width: variables.$device-tablet-max-width) {
        margin-left: $info-box-tablet-margin;
      }
    }
  }

  .detail-wrapper.-has-info-box {
    .detail-header,
    .detail-body > .detail-tabs {
      display: inline-block;
      width: $detail-tabs-width;

      @media (max-width: variables.$device-tablet-max-width) {
        width: $detail-tabs-tablet-width;
      }
    }
  }
}

.detail-info-box {
  line-height: 19px;

  > .title {
    font-size: 16px;
    margin: 0;

    &:not(:first-child) {
      margin-top: 16px;
      border-top: 1px solid #c8c8ca;
      padding-top: 16px;
    }
  }

  br {
    content: " " !important;
    display: block !important;
    margin-bottom: 8px !important;
  }

  > .link {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    display: inline-block;
    line-height: 1.2em;
  }
}

.detail-tabs-header {
  list-style: none;
  margin: 0 0 24px -12px;
  padding: 0;

  background: var(--pub-inset-bgColor);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  white-space: nowrap;

  > .detail-tab {
    display: block;
    transition: opacity 200ms; // allow tabs to fade-in, if -hidden is removed.

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

    &.-hidden {
      visibility: hidden;
      opacity: 0;
    }
  }

  > .tab-button,
  > .tab-link > a {
    display: block;
    color: var(--pub-detail_tab-text-color);
    padding: 12px 0px;
    margin: 0px 18px 0px 12px; // left 12px to compensate .detail-tabs-header's -12px; Sum must be 30px.
    border-bottom: 2px solid;
    border-bottom-color: transparent;
    cursor: pointer;
    text-decoration: none;

    &:hover {
      border-bottom-color: var(--pub-detail_tab-underline-color);
    }
  }

  > .tab-button {
    &.-active {
      font-weight: 500;
      color: var(--pub-detail_tab-active-color);
      border-bottom-color: var(--pub-detail_tab-active-color);
    }
  }

  /* Render admin tabs with red. */
  > .tab-button.-private,
  > .tab-link.-private > a {
    color: var(--pub-detail_tab-admin-color);

    &:hover {
      border-bottom-color: var(--pub-detail_tab-admin-color);
    }
  }
  > .tab-button.-private,
  > .tab-button.-private {
    border-bottom-color: var(--pub-detail_tab-admin-color);
  }
}

.detail-tabs-content {
  > .tab-content {
    display: none;

    &.-active {
      display: block;
    }
  }
}
