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

/* 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/>.
 */

.main {
  position: relative;
  display: flex;
  flex-direction: column;
  background: theme.$lighter-gray;
  min-height: calc(100vh - #{variables.$header-height});
  // margin-bottom: $footer-height;

  &.nofooter {
    margin-bottom: 0;
  }

  &.noheader:not(.nofooter) {
    min-height: calc(100vh - #{variables.$footer-height});
  }
  &.nofooter:not(.noheader) {
    min-height: calc(100vh - #{variables.$header-height});
  }
  &.nofooter.noheader {
    min-height: 100vh;
  }

  @include responsive.breakpoint(lg) {
    margin-bottom: 0;
    min-height: calc(100vh - #{variables.$header-height});
  }
}

/* partials */
.partial--time {
  color: theme.$gray;
  @include font.font-size('small');

  .mobile-text {
    @include responsive.breakpoint(md) {
      display: none;
    }
  }
  .text {
    display: none;

    @include responsive.breakpoint(md) {
      display: inherit;
    }
  }
}

.partial--page-toolbar {
  @include responsive.breakpoint(lg) {
    height: rem.rem(48px);
    border-radius: rem.rem(4px);
    background: theme.$light;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.14);

    &.bottom {
      margin-top: rem.rem(12px);
    }
  }
}

/* icons */
.icon--caret-right {
  transform: rotate(-90deg);
}

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

// was originally used in note show
.frame {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  background: white;

  &.collapsed {
    .book-label {
      // control the coloro of ellipsis when overflown
      // color: $light-gray;
    }

    .book-label a {
      // color: $light-gray;
    }
  }
}
