/* 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";

.settings-page {
  .sidebar {
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    background: white;
    margin-bottom: rem.rem(20px);
    margin-top: rem.rem(20px);

    @include responsive.breakpoint(lg) {
      margin-bottom: 0;
      margin-top: 0;
    }
  }

  .sidebar-item {
    display: block;
    padding: rem.rem(12px) rem.rem(16px);
    border-left: 4px solid transparent;
    @include font.font-size('regular');

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

    &.active {
      font-weight: 600;
      border-left-color: theme.$first;
    }
  }

  .setting-section-wrapper {
    .header {
      @include responsive.breakpoint(lg) {
        display: none;
      }
    }

    .setting-section {
      margin-top: rem.rem(24px);
      background: white;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.14);

      &:first-child {
        margin-top: 0;
      }
    }

    .section-heading {
      @include font.font-size('regular');
      font-weight: 600;
      padding-bottom: rem.rem(4px);
      background: theme.$light;
      padding: rem.rem(16px) rem.rem(20px);
    }
    .section-content {
      margin-top: rem.rem(20px);
    }

    .actions {
      margin-top: rem.rem(18px);
      text-align: right;
    }
  }

  .setting-row {
    padding: rem.rem(16px) rem.rem(20px);

    &:not(:last-child) {
      border-bottom: 1px solid theme.$border-color;
    }

    .setting-row-summary {
      display: flex;
      flex-direction: column;
      // align-items: flex-start;

      @include responsive.breakpoint(md) {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
    }

    .setting-row-main {
      padding-top: rem.rem(24px);
    }

    .setting-name {
      font-weight: 400;
      @include font.font-size('regular');
      margin-bottom: 0;
    }
    .setting-desc {
      margin-bottom: 0;
      @include font.font-size('small');
      color: theme.$gray;
    }
    .setting-action {
      display: flex;
      flex-direction: column;

      @include responsive.breakpoint(md) {
        flex-direction: row;
      }
    }

    .setting-right {
      display: flex;
      word-break: break-all;
      justify-content: space-between;
      align-items: center;
      margin-top: rem.rem(4px);

      @include responsive.breakpoint(md) {
        flex-direction: row;
        align-items: center;
        margin-top: 0;
      }
    }

    .setting-edit {
      color: theme.$link;
      padding: 0;

      &:hover {
        color: theme.$link-hover;
      }
      @include responsive.breakpoint(md) {
        margin-left: rem.rem(16px);
      }
    }

    .input-row {
      & ~ .input-row,
      .input-row {
        margin-top: rem.rem(12px);
      }
    }
  }

  .email-verification-form {
    margin-left: rem.rem(12px);
  }
}
