/*
Component represents a story with progress.
Use:
  <div class="top-story-container">
    <div class="top-story active">
      <span style="--value: 50%"></span>
      <img src="...">
    </div>
    <div class="top-story">
      <span style="--value: 75%"></span>
      <img src="...">
    </div>
  </div>
*/
@use '../mixins/flex.scss';

.top-story-container {
  overflow: scroll;
  
  @include flex.gap(var(--unit-5));

  // Default: row
  @include flex.row;

  &.style-row {
    @include flex.row;
  }
  &.style-column {
    @include flex.column;
  }
}

.top-story {
  $base-size: 50px;
  $progress-thickness: 2px;

  width: $base-size;
  height: $base-size;

  border-radius: var(--radius-5);

  position: relative;

  // Fallback if not loaded image
  background: gray;

  opacity: 0.5;
  cursor: pointer;

  transition: var(--transition);
  transition-property: opacity;

  > img, > span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  // Story image
  > img {
    width: $base-size;
    height: $base-size;

    z-index: 25;

    border-radius: var(--radius-5);
  }
  // Story progress
  > span {
    --value: 35%;

    display: block;
    width: $base-size;
    height: $base-size;

    z-index: 15;

    background: conic-gradient(var(--color-primary) var(--value), 0, white calc(100% - var(--value)));

    border-radius: var(--radius-5);

    transition: var(--transition);
    transition-property: background;
  }

  &.active {
    opacity: 1;

    cursor: default;

    > img {
      width: calc($base-size - ($progress-thickness * 2));
      height: calc($base-size - ($progress-thickness * 2));

      top: $progress-thickness;
      bottom: $progress-thickness;
      left: $progress-thickness;
      right: $progress-thickness;
    }
  }
  &:hover {
    opacity: 1;
  }
}