/*!
 * Copyright since 2010 Daniel Dziedzic
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Compsoul Restricted License
 * bundled with this package in the file LICENSE.md.
 * If you did not receive a copy, please contact: daniel@compsoul.pl
 *
 * @author Daniel Dziedzic <daniel@compsoul.pl>
 * @copyright Since 2010 Daniel Dziedzic
 * @license See LICENSE.md — Compsoul Restricted License
 *
 * @see https://compsoul.pl
 * @see https://compsoul.dev
 */
.module-review {
  --module: "review";
}

.module-review .review-container {
  --rem: var(--_rem, 100px);
  --grid: var(--_grid, 100px);

  --animation-duration: var(--_animation-duration, 0.2s);
  --animation-timing-function: var(--_animation-timing-function, linear);

  --color-main: var(--_color-main, 230, 238, 239);
  --color-font_: var(--_color-font_, 6, 16, 17);

  background: rgb( var(--color-main) );  
  display: grid;
  gap: calc( 0.92 * var(--_rem) ) 0;
  grid-template-areas:
    "heading nav"
    "list nav";
  padding-bottom: calc( 0.5 * var(--grid) );
  padding-top: calc( 0.5 * var(--grid) );
  position: relative;
}

.module-review .review-heading {
  grid-area: heading;  
}

.module-review .review-list {
  background: inherit;
  display: grid;
  grid-area: list;
  height: unset;
}

.module-review .review-item {
  align-items: center;
  background: inherit;
  display: grid;
  font-size: calc( 0.20 * var(--rem) );
  gap: 0 calc( 0.5 * var(--grid) );
  grid-column: 1;
  grid-row: 1;
  grid-template-areas:
    "content content"
    "photo ."
    "photo user"
    "photo location"
    "photo rating"
    "photo .";
  grid-template-columns: var(--rem) 1fr;
  line-height: 1.5;
  position: relative;
}

.module-review .review-user {
  font-style: italic;
  font-weight: 700;
  grid-area: user;
  line-height: 1.5;
}

.module-review .review-content {
  align-items: center;
  display: inline-flex;
  font-size: calc( 0.5 * var(--grid) );
  font-weight: 700;
  grid-area: content;
  letter-spacing: -0.06em;
  line-height: 1.25;
  margin-bottom: var(--grid);
  min-height: calc( 3 * var(--grid) );
  text-transform: uppercase;
}

.module-review .review-location {
  font-weight: 300;
  grid-area: location;
}

.module-review .review-photo {
  border-radius: 100%;
  grid-area: photo;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}

.module-review .review-rating {
  align-items: center;
  display: flex;
  font-weight: 700;
  gap: 0 calc( 0.02 * var(--rem) );
  grid-area: rating;
}

.module-review .review-rating:before {
  font-size: 0.8em;
}

.module-review .review-rating:after {
  display: none;
}

.module-review .review-max-rating:before {
  content: "/";
  margin-right: calc( 0.02 * var(--rem) );
}

.module-review .review-source {
  align-items: center;
  display: flex;
  color: rgb( var(--color-font_) );
  margin-left: calc( 0.14 * var(--rem) );
  text-decoration: unset;
}

.module-review .review-source-logo {
  display: block;
  max-height: 1em;
}

.module-review .review-timeline {
  opacity: 0;
}

.module-review .review-nav {
  align-self: center;
  display: flex;
  flex-flow: column;
  grid-area: nav;
  margin: 0 calc( var(--_padding_) / 2 ) 0 auto;
  transform: translate(50%, 0);
}

.module-review .review-nav-item {
  cursor: pointer;
}

.module-review .review-nav-button {
  align-items: center;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  flex-flow: column;
  margin: 0;
  padding: calc( 0.10 * var(--rem) );
  pointer-events: none;
}

.module-review .review-nav-button:before {
  border: 1px solid rgb( var(--color-font_) );
  border-radius: 100%;
  box-sizing: border-box;
  content: "";
  height: calc( 0.16 * var(--rem) );
  width: calc( 0.16 * var(--rem) );
}

.module-review .review-nav-button:after {
  background: linear-gradient(
    to bottom,
    rgba( var(--color-font_), 0 ) calc( 0.20 * var(--rem) ),
    rgba( var(--color-font_), 1 ) calc( 0.20 * var(--rem) )
  );
  content: "";
  height: 0;
  transition: height var(--animation-duration) var(--animation-timing-function);
  width: 2px;
}

.module-review .compsoul-active .review-nav-button:after,
.module-review .compsoul-active .review-nav-button:focus {
  height: calc( 1.5 * var(--grid) );
}

@media (max-width: 1200px) {
  .module-review .review-nav {
    margin: 0 0 0 auto;
    transform: unset;
  }
}

@media (max-width: 1000px) {
  .module-review .review-container {
    gap: var(--grid) 0;
    grid-template-areas: "heading"
                         "list"
                         "nav";
  }

  .module-review .review-item {
    font-size: 1em;
    gap: 0 1em;
    grid-template-columns: calc( 0.75 * var(--rem) ) 1fr;
  }

  .module-review .review-content {
    min-height: 56vh;
  }

  .module-review .review-nav {
    flex-flow: row;
    justify-content: center;
    margin: 0;
    transform: unset;
  }

  .module-review .review-nav-button {
    flex-flow: row;
    padding: calc( 0.06 * var(--rem) );
  }

  .module-review .review-nav-button:before {
    border: calc( 0.01 * var(--rem) ) solid rgb( var(--color-font_) );
    height: calc( 0.12 * var(--rem) );
    width: calc( 0.12 * var(--rem) );
  }

  .module-review .review-nav-button:after {
    background: linear-gradient(
      to right,
      rgba( var(--color-font_), 0 ) calc( 0.12 * var(--rem) ),
      rgba( var(--color-font_), 1 ) calc( 0.12 * var(--rem) )
    );
    height: calc( 0.02 * var(--rem) );
    transition: width var(--animation-duration) var(--animation-timing-function);
    width: 0;
  }

  .module-review .compsoul-active .review-nav-button:after,
  .module-review .compsoul-active .review-nav-button:focus {
    height: calc( 0.02 * var(--rem) );
    width: calc( 1.5 * var(--grid) );
  }
}