@use "breakpoints";
@use "typography";
@use "variables";

.reading-list-summary {
  .reading-list {
    &-title {
      margin-bottom: variables.$spacing-third;
    }

    &-description {
      font-size: typography.$smallish-font;
    }

    &-items {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    &-item {
      padding-top: variables.$spacing-third;
      margin-top: variables.$spacing-third;
      border-top: variables.$border;
      font-size: typography.$medium-font;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &-delete {
        border: none;
        background: none;
        padding: 0;
        margin: 0;
        color: var(--text-color-dark);

        &:hover {
          color: var(--text-color);
        }
      }
    }
  }

  @include breakpoints.small-medium {
    margin-top: variables.$spacing;
  }
}

.reading-list-summary {
  @include breakpoints.large {
    position: sticky;
    top: variables.$spacing * 2;
    opacity: 0.4;
    transition: all 300ms ease-in;

    &:hover,
    &:focus-within {
      opacity: 1;
    }

    @media (prefers-contrast: more) {
      opacity: 1;
    }
  }
}

.reading-list-results {
  background: var(--bg-color-light);
  padding: variables.$spacing * 2;
  margin-bottom: variables.$spacing;

  .reading-list {
    &-title {
      text-align: center;
      font-size: typography.$largeish-font;
      text-transform: uppercase;
      display: flex;
      gap: variables.$spacing-half;
      align-items: center;
      margin-bottom: var(--halfSpacing);

      &::before,
      &::after {
        content: " ";
        display: block;
        height: 1px;
        width: 100%;
        background: var(--dark-border-color);
      }

      span {
        flex: 1;
        white-space: nowrap;
      }
    }

    &-description {
      // font-size: typography.$large-font;
      margin-bottom: variables.$spacing;
      // @include typography.secondary-font;
      text-align: center;
      text-align: left;
      font-style: italic;
    }

    &-items {
      margin-bottom: variables.$spacing;
    }

    &-show-more {
      display: flex;
      justify-content: center;
    }

    &-item {
      padding-top: variables.$spacing;
      margin-top: variables.$spacing;
      border-top: variables.$border;

      &-resources-item {
        &-domain {
          font-size: typography.$small-font;
          display: inline-block;
          margin-left: variables.$spacing-quarter;
          color: var(--text-color-dark);
        }
      }

      &-title {
        display: flex;
        align-items: center;
        gap: variables.$spacing-half;
        margin-bottom: variables.$spacing-half;
        font-size: typography.$large-font;

        &-link {
          display: flex;
          align-items: center;
          gap: 5px;

          svg {
            width: 16px;
            height: 16px;
            position: relative;
            top: -2px;
          }
        }
      }

      &-summary {
        font-size: typography.$medium-font;
      }

      &-links {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        gap: variables.$spacing;
      }
    }

    &-link-button {
      display: flex;
      align-items: center;
      gap: variables.$spacing-sixth;
      padding: 4px 8px;
      font-size: typography.$small-font;

      // @include primary-font;
      span {
        display: block;
        line-height: 1;
        @include typography.font-regular;
      }

      svg {
        width: 16px;
        height: 16px;
        position: relative;
        top: -1px;
      }
    }

    &-link {
      background: var(--bg-color-lighter);
      border-radius: 10px;
      display: block;
      color: var(--text-color);
      font-weight: typography.$medium;
      @include typography.primary-font;
      font-size: typography.$small-font;
      padding: 3px 6px;
      display: flex;
      align-items: center;
      gap: variables.$spacing-sixth;

      span {
        display: block;
        line-height: 1;
      }

      svg {
        width: 16px;
        height: 16px;
        position: relative;
        top: -1px;
      }

      &:hover {
        background-color: var(--link-color);
        text-decoration: none;
      }
    }

    &-send {
      padding-top: variables.$spacing;
      margin-top: variables.$spacing;
      border-top: variables.$border;

      &-title {
        font-size: typography.$large-font;
        margin-bottom: variables.$spacing;
        @include typography.secondary-font;
        text-align: center;
      }
    }

    &-form {
      display: flex;
      align-items: center;
      gap: variables.$spacing-half;
    }
  }

  .survey-message {
    margin: 0;
    margin-top: variables.$spacing;
  }
}

@keyframes flash {
  0% {
    opacity: 0.8;
    background: rgba(255, 255, 255, 0.15);
  }

  100% {
    opacity: 0.3;
    background: rgba(255, 255, 255, 0);
  }
}

.reading-list-animate {
  animation: flash ease-in 0.5s;
}

.add-to-list {
  position: absolute;
  top: -1px;
  right: -1px;
  margin-left: variables.$spacing-half;

  .btn {
    // border-radius: 100%;
    border-radius: 0 0 0 3px;
    aspect-ratio: 1/1;
    padding: 3px;
  }

  svg {
    height: 20px;
    width: 20px;
    display: block;
  }

  .form-option-add & {
    opacity: 0.2;
    position: relative;

    .form-option:hover & {
      opacity: 1;
    }
  }

  .form-item-reading-list-highlighted & {
    animation: glowing 2000ms infinite;
    border: 2px solid var(--link-color);
  }
}

@keyframes glowing {
  from,
  to {
    box-shadow: 0 0 0px hsl(180 90% 68% / 0.8);
  }

  45%,
  55% {
    box-shadow: 0 0 20px hsl(180 90% 68% / 0.8);
  }
}
