@import "./variables";
@import "./functions";
@import "./boostrap-icons.scss";


.al-page-blog-index {
 
    margin: auto;
    max-width: 680px;
  
  .al-page-blog-posts {

    article {
      a.al-article-title-link {
        text-decoration: none;

        h2 {
          font-weight: 400;
          font-size: 1.5rem;
        }
      }

      .al-article-date {
        color: #efefef;
        font-size: 0.82rem;

        i {
          font-size: 0.8rem;
          margin-right: 5px;

          @at-root {
            [dir=rtl] & {
              padding-right: 0;
              padding-left: 6px;
            }
          }
        }
      }

      .al-article-excerpt {
        color: $al-font-color;
      }

      .al-article-actions {

        a.al-article-continue {
          text-decoration: none;
          font-size: 0.9rem;
          color: #C4E1FF;

          i{
            margin-right: 5px;
          }

          &:hover {
            text-decoration: underline;
          }
        }
      }

      .al-article-author{
        img{
          width: 40px;
          height: 40px;
        }
        .al-article-author-name{
          font-style: italic;
          font-size: 14px;
          margin: 0px;
          margin-bottom: 5px;
          color: #C4E1FF;
        }
        .al-article-author-bio{
          font-style: italic;
          font-size: 12px;
          margin: 0px;
          color: #C4E1FF;
        }
      }
    }
  }

  .pagination {
    .page-item {
      .page-link {
        background: lighten($al-body-background, 15%);
        border: none;

        &:hover {
          color: #efefef;
        }
      }

      &.active {
        .page-link {
          background: lighten($al-body-background, 25%);
        }
      }

      &.disabled {
        .page-link {
          color: darken($al-body-background, 15%);
        }
      }
    }
  }
}

.al-page-blog-post {

  .container{
    padding: 3rem 15px !important;
  
  article {
    .al-article-date {
      color: #efefef;
      font-size: 0.82rem;

      i {
        font-size: 0.8rem;

        @at-root {
          [dir=rtl] & {
            padding-right: 0;
            padding-left: 6px;
          }
        }
      }
    }

    .al-article-content {
      color: $al-font-color;

      img {
        max-width: 100%;
      }
    }
    .al-page-blog-author{
        img{
          width: 40px;
          height: 40px;
        }
        .al-page-blog-author-name{
          font-style: italic;
          font-size: 14px;
          margin: 0px;
          margin-bottom: 5px;
          color: #C4E1FF;
        }
        .al-page-blog-author-bio{
          font-style: italic;
          font-size: 12px;
          margin: 0px;
          color: #C4E1FF;
        }
      }
  }

  .al-blog-pagination{
    .al-blog-previous-button {
      background: $al-c-atlantis;
      color: #222222;

      &:hover {
        background: darken($al-c-atlantis, 5%);
      }
    }
    .al-blog-next-button {
      background: $al-c-atlantis;
      color: #222222;
      float: right;

      &:hover {
        background: darken($al-c-atlantis, 5%);
      }
    }
    a {
      text-decoration: none;
      display: inline-block;
      padding: 10px 16px;
      font-size: 15px;
    }
  }
}
}
.custom-blog-page-section{
  margin: auto;
}
.al-page-blog-index .pagination .page-item .page-link {
  background: #196da9 !important;
  border: none;
}

.pagination .page-item .page-link {
  background: #196da9 !important;
  padding: .375rem .75rem !important;
  color: #c4e1ff;
  border: none;
  text-decoration: none;
}
.pagination .active .page-link{
  background: #1f8ad5 !important;
}
.pagination .disabled {

  color: #000 !important;
  
}
@media (max-width: 800px){
  .custom-blog-page-section {
    max-width: 100%;
    margin: auto;
  }
.highlight > pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  padding: 10px;
  font-size: 16px;
  border-radius: 10px;
  overflow-wrap: anywhere;
}
}