// chappe
//
// Copyright 2021, Crisp IM SAS
// Author: Valerian Saliou <valerian@valeriansaliou.name>

@use "../_globals" as *;

#guides {
  .details {
    border-bottom: 1px solid var(--color-guides-details-border);
    padding-bottom: 18px;

    .details-upper,
    .details-lower {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .details-upper .details-category,
    .details-lower .details-title {
      flex: 1;
    }

    .details-upper .details-feedback,
    .details-lower .details-updated {
      flex: 0 0 auto;
      padding-left: 8px;

      @include font-size(13.5px);
    }

    .details-upper .details-category,
    .details-lower .details-updated {
      color: var(--color-guides-details-inner-text);
    }

    .details-upper {
      .details-category {
        line-height: 18px;
        margin-left: -2px;
        overflow: visible;

        @include font-size(16px);

        .details-icon {
          width: 19px;
          height: 19px;
          margin-top: -3px;
          margin-right: 4px;
          vertical-align: middle;

          @include background-image-fill;
        }
      }

      .details-feedback {
        color: var(--color-accent-base);
        user-select: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .details-lower {
      margin-top: 10px;

      .details-title {
        color: var(--color-black);
        line-height: 24px;

        @include font-size(23px);
      }
    }
  }

  .article {
    padding-top: 40px;
  }
}

// - Media Queries

// For screens below defined widths

@media screen and (max-width: $screen-small-width-breakpoint) {
  #guides {
    .details {
      .details-upper {
        padding-left: 48px;
      }
    }
  }
}

@media screen and (max-width: $screen-tiny-width-breakpoint) {
  #guides {
    .details {
      padding-left: 40px;
      padding-right: 10px;

      .details-upper .details-category,
      .details-lower .details-title {
        text-align: center;
      }

      .details-upper .details-feedback,
      .details-lower .details-updated {
        display: none;
      }

      .details-upper {
        padding-left: 0;
      }
    }

    .article {
      padding-top: 30px;
    }
  }
}