/* Copyright (C) 2019, 2020, 2021, 2022, 2023, 2024, 2025 Dnote contributors
 *
 * This file is part of Dnote.
 *
 * Dnote is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * Dnote is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

@use 'theme';
@use 'font';
@use "rem";
@use "responsive";

.home-page {
  .note-group-list {
    flex-grow: 1;

    @include responsive.breakpoint(lg) {
      margin-top: rem.rem(16px);
    }

    .note-group-list-empty {
      padding: rem.rem(40px) rem.rem(16px);
      text-align: center;
      color: theme.$gray;
    }
  }

  .note-group {
    position: relative;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.14);

    &:not(:first-of-type) {
      margin-top: rem.rem(20px);

      @include responsive.breakpoint(md) {
        margin-top: rem.rem(24px);
      }
    }

    .note-group-header {
      @include font.font-size('small');
      display: flex;
      justify-content: space-between;
      color: white;
      padding: rem.rem(12px) rem.rem(16px);
      background: theme.$light;
      color: theme.$black;
      border-bottom: 1px solid theme.$border-color;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }

    .date {
      font-weight: 600;
      @include font.font-size('small');
    }

    .mask {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: white;
      z-index: 1;
      opacity: 0.8;
    }

    .header-date {
      font-weight: 600;
      @include font.font-size('regular');
    }
    .header-count {
      font-weight: 300;
    }

    .list {
      list-style: none;
      padding-left: 0;
      margin-bottom: 0;
    }
  }

  .note-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
  }

  .note-item {
    background: white;
    position: relative;

    border-bottom: 1px solid theme.$border-color;

    .link {
      color: theme.$black;
      display: block;
      padding: rem.rem(12px) rem.rem(16px);
      border: 2px solid transparent;

      &:hover {
        text-decoration: none;
        background: theme.$light-blue;
        color: inherit;
      }
    }

    .meta {
      line-height: rem.rem(16px);
    }

    .body {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .note-header {
      display: flex;
      justify-content: space-between;
    }

    .note-content {
      margin-top: rem.rem(12px);
      line-height: 1.6rem;
      overflow: hidden;
      text-overflow: ellipsis;
      color: theme.$gray;
    }

    .book-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 700;
      @include font.font-size('small');

      width: 212px;

      @include responsive.breakpoint('md') {
        width: 320px;
      }
    }

    .match {
      display: inline-block;
      background: #f7f77d;
      padding: rem.rem(4px) rem.rem(4px);
    }
  }

  .toolbar {
    text-align: right;
  }

  .paginator {
    display: inline-flex;
    align-items: center;

    .paginator-info {
      @include font.font-size('small');
      color: theme.$gray;
    }

    .paginator-link {
      padding: rem.rem(12px) rem.rem(12px);

      &.disabled {
        cursor: not-allowed;
      }
    }

    .paginator-link-prev {
      margin-left: rem.rem(8px);

      @include responsive.breakpoint(md) {
        margin-left: rem.rem(20px);
      }
    }

    .caret-next {
      transform: rotate(-90deg);
    }

    .caret-prev {
      transform: rotate(90deg);
    }

    .paginator-label {
      font-weight: 600;
    }
  }
}
