// 常用按钮配色
@mixin btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
  &:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
  }
  &:focus {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
  }
  &:disabled {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
  }
}
// 常用按钮透明版
@mixin btn-outline-primary {
  color: #007bff;
  border-color: #007bff;
  &:hover {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
  }
  &:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
  }
  &:disabled {
    color: #007bff;
    background-color: transparent;
  }
}
// 链接配色
@mixin link-primary {
  color: #007bff;
  &:hover {
    color: #0056b3;
  }
}
// 文字配色
$text-primary: #007bff;

.primary-color {
  // 顶部导航栏配色
  header .navbar {
    background-color: $text-primary !important;
    .navbar-brand {
      color: #fff;
    }
    .navbar-brand:hover,.navbar-brand:focus {
      color: #fff;
    }
    .navbar-nav .nav-link {
      color: rgba(255, 255, 255, 0.5);
    }
    .navbar-nav .nav-link:hover,.navbar-nav .nav-link:focus {
      color: rgba(255, 255, 255, 0.75);
    }
    .navbar-nav .nav-link.disabled {
      color: rgba(255, 255, 255, 0.25);
    }
    .navbar-nav .show > .nav-link,
    .navbar-nav .active > .nav-link,
    .navbar-nav .nav-link.show,
    .navbar-nav .nav-link.active {
      color: #fff;
    }
    .navbar-toggler {
      color: rgba(255, 255, 255, 0.5);
      border-color: rgba(255, 255, 255, 0.1);
    }
    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    .navbar-text {
      color: rgba(255, 255, 255, 0.5);
    }
    .navbar-text a {
      color: #fff;
    }
    .navbar-text a:hover,.navbar-text a:focus {
      color: #fff;
    }
  }

  // 文章列表配色
  .article-list .post, .archives-list .post {
    .article-info {
      i,span {
        color: $text-primary;
      }
      a {
        @include link-primary;
      }
    }
  }

  // 分页导航区配色
  .pagination-nav ul,.post-pagination ol {
    li a {
      color: $text-primary;
    }
    .active a {
      color: #ffffff;
      background-color: $text-primary;
      border: none;
    }
  }

  // 侧边栏配色
  .sidebar {
    // 通用列表链接、最新评论链接、博客信息区域链接、日历链接配色
    section ul > li > a,.latest-comment a,.user-name,.calendar a {
      @include link-primary;
    }
    // 列表的徽章配色
    section ul li .badge {
      background-color: $text-primary;
      color: #ffffff;
    }
    // 标签云配色
    .tag-cloud a {
      border: 1px solid $text-primary;
      color: $text-primary;
      &:hover {
        background-color: $text-primary;
        color: #ffffff;
      }
      &:focus {
        background-color: $text-primary;
        color: #ffffff;
      }
    }
    // 搜索组件配色
    .search {
      button {
        @include btn-primary;
      }
    }
  }

  // 面包屑导航配色
  .breadcrumb-nav a {
    @include link-primary;
  }

  // 文章页配色
  .content-area {
    // 文章信息区域
    .article-info .info {
      span,i {
        color: $text-primary;
      }
      a {
        @include link-primary;
      }
    }
    // 文章内容区域
    .post-content {
      // 链接
      a {
        @include link-primary;
      }
    }
    // 分享和点赞区域
    .agree-and-share {
      button {
        @include btn-outline-primary;
      }
    }
    // 上一篇文章和下一篇文章的导航区域
    .post-navigation a {
      @include link-primary;
    }
  }

  // 评论区配色
  #comments {
    // 发表评论区
    #comment-form {
      // 打开表情面板按钮
      #show-emoji-btn {
        @include btn-outline-primary;
      }
      // 表情面板
      #emoji-classification {
        button[aria-checked="true"] {
          background-color: $text-primary;
        }
      }
      // 当前登录用户链接
      .comment-user a {
        @include link-primary;
      }
      // 提交评论按钮
      .submit {
        @include btn-primary;
      }
    }
    // 评论列表区
    .comment-box {
      // 评论者昵称
      .comment-info {
        .author a {
          @include link-primary;
        }
      }
      // 回复链接
      .comment-reply a {
        border: 1px solid $text-primary;
        color: $text-primary;
        &:hover {
          background-color: $text-primary;
          color: #ffffff;
        }
      }
      // 评论内容区的链接
      .comment-content a {
        @include link-primary;
      }
    }
  }

  // 页脚的功能按钮
  #footer-btn-box button {
    color: $text-primary;
  }

  // 独立页面 - 分类目录
  .category-page .category-list {
    .icon {
      color: $text-primary;
    }
  }

  // 移动设备专用目录
  #directory-mobile .directory-list a {
    @include link-primary;
  }

  // 数据统计页配色
  .data-page {
    .statistics-card {
      background-color: #B3D8FF;
    }
  }

  // 404页面配色
  .container-404 {
    .to-home-link, .search-btn {
      @include btn-primary;
    }
  }

  // 目录高亮
  .directory-active {
    color: #0056b3 !important;
  }
}