// Multiplying factor for typography it is only used internally, user doesn't have access to this variable
$multiplying-factor: 1.1;

// Base padding and margin
$base-spacing-xxs: 2px;
$base-spacing-xs: 5px;
$base-spacing-sm: 8px;
$base-spacing-xsm: 10px;
$base-spacing: 16px;
$base-spacing-xmd: 20px;
$base-spacing-md: 24px;
$base-spacing-lg: 32px;
$base-spacing-xl: 64px;
$base-spacing-xxl: 72px;
$base-spacing-xxxl: 80px;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: $base-bg-color;
}

html, body
{
    height: 100%;
}

@function mpow($number, $exponent) {
  $value: 1;
  @if $exponent > 0 {
    @for $i from 1 through $exponent {
      $value: $value * $number;
    }
  } @else if $exponent < 0 {
    @for $i from 1 through -$exponent {
      $value: $value / $number;
    }
  }
  @return $value;
}



// Body text
// -------------------------

p,
div {
  font-size: $base-font-size;
  font-family: $base-font-family;
  color: $base-text-color;
}

// Headings
// -------------------------

h1,
.h1 {
  font-size: $base-font-size * mpow($multiplying-factor, 4);
  font-weight: normal;
  font-family: $base-font-family;
  color: $base-text-color;
}
h2,
.h2 {
  font-size: $base-font-size * mpow($multiplying-factor, 3);
  font-weight: normal;
  font-family: $base-font-family;
  color: $base-text-color;
}
h3,
.h3 {
  font-size: $base-font-size * mpow($multiplying-factor, 2);
  font-weight: normal;
  font-family: $base-font-family;
  color: $base-text-color;
}
h4,
.h4 {
  font-size: $base-font-size * mpow($multiplying-factor, 1);
  font-weight: normal;
  font-family: $base-font-family;
  color: $base-text-color;
}
h5,
.h5 {
  font-size: $base-font-size;
  font-weight: normal;
  font-family: $base-font-family;
  color: $base-text-color;
}
h6,
.h6 {
  font-size: $base-font-size / mpow($multiplying-factor, 1);
  font-weight: normal;
  font-family: $base-font-family;
  color: $base-text-color;
}

// Buttons & Links
// -------------------------

button.ui.button {
  background: $buttons-bg-color !important;
}

i.icon {
  color: $buttons-icon-color !important;
}
a {
  color: $base-links-color;
}





.categories-labels {
  display: inline-block;
  border-radius: 2px;
  padding: $base-spacing-xs;
  margin: $base-spacing-xxs;
  background-color: $category-color;
  color: $category-text;
  font-size: $base-font-size;
}



.posts-carousel-container .footer {
  position: absolute;
  bottom: 0;
  // height: unset;
  display: flex;
  justify-content: flex-start;
  width: 100%;
  background: $footer-bg-color;
  padding: $base-spacing-xs;
  border-top: solid 1px $border-color;
  z-index: 1000;

  .footer-side {
    max-width: 60px;
    flex: 1;
    text-align: center;
  }

  h4 {
    flex: 1;
    text-align: center;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  h4, span {
    color: $base-text-color;
    line-height: 2rem;
  }
}



.comments-form.ui.form {
  > div {
    padding: $base-spacing-xsm 0;
    input,
    textarea {
      margin: $base-spacing-xs 0 0 0;
      border-color: $form-border-color;
      font-family: $base-font-family;
    }
  }

  button {
    font-family: $base-font-family;
    color: $buttons-icon-color;
  }
}



.navbar.button.tiny.right.ui {
  position: absolute;
  z-index: 1;
  top: 2%;
  right: 3%;
  padding-top: $base-spacing-xsm;
  padding-bottom: $base-spacing-xsm;
  padding-right: $base-spacing;
  padding-left: $base-spacing;
  .icon.content.large {
    margin: 0;
  }
}



.not-found.ui.header {
  display: flex;
  align-items: center;
  padding-top: $base-spacing-xl;
}



.categories-card .item {
  position: relative;
}

.categories-card .ui.header {
  z-index: 1;
  display: flex;
  align-items: flex-end;
  flex-direction: row;
  text-align: start;
  padding: 9px 15px;
  background: -webkit-linear-gradient(
    bottom,
    rgba(0, 0, 0, 0.4),
    rgba(0, 0, 0, 0.08) 55px,
    transparent 80px,
    transparent
  );

  h1 {
    font-weight: 100;
    text-transform: uppercase;
    color: $cover-text-color;
    overflow-wrap: break-word;
    max-width: 100%;
  }
}

.categories-card .ui.header.header > div {
  height: unset;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
.categories .ui.image.big {
  width: 100vw;
}
*/

.categories-card .item {
  background-repeat: no-repeat;
  background-size: cover;
  background-color: $cover-panel-color;
}

/* override semantic ui styles */
/* GRID */

.categories-card {
  .ui.grid {
    margin: 0;
    > .row {
      justify-content: center;
      padding-top: 0;
      padding-bottom: 0;
      > .column {
        padding-left: 0;
        padding-right: 0;
      }
    }
  }
  .ui.divided.grid:not([class*="vertically divided"]) > .row > .column {
    box-shadow: none;
  }
  .divided.two > .row > .column:only-child {
    width: 100vw;
  }
  .full-row .row {
    height: 100%;
  }
  .half-row .row {
    height: 50.2%;
  }
  .one-third-row .row {
    height: 33.7%;
  }
}



.carousel-container {
  background-color: $cover-panel-color;
  position: absolute;
  width: 100%;
  height: 100%;
}

.carousel-container .pusher,
.carousel-container .slick-slider,
.carousel-container .slick-list,
.carousel-container .slick-track,
.carousel-container .pusher div {
  height: 100%;
}

.carousel-container .slick-side {
  height: 110%;
}

.carousel-container .slick-dots {
  bottom: 9%;
  width: 90%;
  left: 5%;
  border-radius: 20px;
  opacity: 1;
}

.carousel-container .slick-dots li {
  margin: 0 5px;
}
.carousel-container .slick-dots li button::before {
  font-size: 15px;
  color: $buttons-bg-color;
}
.carousel-container .slick-dots li.slick-active button::before {
  color: $buttons-bg-color;
}

.carousel-container .pusher .ui.loader.active {
  &::before, &::after {
    top: 50%;
  }
}

.ui.image.logo {
  position: absolute;
  z-index: 1000;
  top: $base-spacing;
  left: $base-spacing;
  width: 100px;
  height: auto;
}



/* COMMENTS */
.ui.comments.post-comments {
  margin: 0;

  .comment {
    margin: $base-spacing-lg;
    padding: 0;
    > .avatar ~ .content {
      text-align: start;
    }
  }
  /* Button */
  button {
    margin: $base-spacing-xmd $base-spacing-xsm 0;
    font-family: $base-font-family;
    color: $buttons-icon-color;
  }

  /* text */
  .no-comments {
    font-family: $base-font-family;
    padding-top: $base-spacing-lg;
  }
}

.ui.modal.comments-modal {
  background-color: $base-bg-color !important;

  .header, .content {
    background: none;
  }
}



.comments-container {
  /* HEADER */
  .ui.block.header.comments-header {
    border: none;
    text-align: center;
    margin: 0;
    color: $base-text-color;
    font-family: $base-font-family;
    border-radius: 0;
    background-color: $footer-bg-color;

    /* CLOSE ICON */
    a {
      position: absolute;
      right: 0;
    }
  }
}


/* MODAL */
.react-router-modal__container.page-details {

  border-color: $border-color;
  width: 100vw;

  .react-router-modal__modal {
    width: 94%;
    height: 98%;
    overflow-y: scroll;
    background-color: $base-bg-color;

    .ui.container.page {
      margin-bottom: $base-spacing-xmd;
      a {
        color: $base-links-color;
      }

      .ui.dividing.header {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        padding-bottom: $base-spacing-xsm;
        margin-bottom: $base-spacing-xsm;
        border-color: $border-color;

        // align close button to header
        a {
          margin: calc(2rem - 0.14285714em) 0 0rem;
        }

        h1 {
          overflow-wrap: break-word;
        }
      }

      .sub.header {
        color: $extra-text-color;
        padding-bottom: $base-spacing-xsm;
        margin-bottom: $base-spacing-xsm;
        overflow-wrap: break-word;
      }

      .page-featured-image {
        margin-bottom: $base-spacing;
      }

      .page-content {
        overflow-wrap: break-word;

        iframe {
          max-width: 100%;
          height: auto;
        }
        img {
          max-width: 100%;
          height: auto;
        }

        div {
          max-width: 100%;
        }
      }
    }
  }
}



.share.ui.modal {
  height: 90%;

  .actions {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    a {
      margin-left: $base-spacing-sm;
      margin-right: $base-spacing-sm;
    }

    .social-media {
      display: flex;
      justify-content: space-evenly;
    }

    i.icon.circular {
      color: $buttons-icon-color;
      background-color: $buttons-bg-color;
      box-shadow: none;
    }
  }
}



.post {
  &.container {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    text-align: left;

    .post-image {
      height: 60vh;
      background: center no-repeat;
      background-size: cover;
    }

    .container {
      margin: $base-spacing;
      padding-top: $base-spacing-sm;

      .ui.header {
        text-align: start;

        h1 {
          overflow-wrap: break-word;
        }
      }

      .sub.header {
        color: $extra-text-color;
        margin-top: $base-spacing;
        margin-bottom: $base-spacing;
        overflow-wrap: break-word;
      }

      .label {
        height: unset;
        border-radius: 2px;
        padding: $base-spacing-xsm $base-spacing-xs;
        margin: $base-spacing-xs;
        background-color: $category-color;
        color: $category-text;
      }

      .post-content {
        padding: 0 $base-spacing-xsm;
        overflow-wrap: break-word;

        iframe {
          max-width: 100%;
          height: auto;
        }
        img {
          max-width: 100%;
          height: auto;
        }

        div {
          max-width: 100%;
        }
      }
    }
    /* ICON */
    i {
      &.icon.circular {
        color: $buttons-icon-color;
        background-color: $buttons-bg-color;
        box-shadow: none;

        &.chevron.left {
          margin-top: $base-spacing;
          margin-left: $base-spacing;
        }

        &.chevron.left.absolute {
          position: absolute;
          z-index: 1;
          top: $base-spacing;
          left: $base-spacing;
          margin-top: 0;
          margin-left: 0;
        }

        &.share {
          margin: $base-spacing-md;
        }
      }
    }
  }
  .transition-container {
    display: flex;
    justify-content: flex-end;
  }
}



.item.post-item {
  padding: 1rem;
  .header {
    text-transform: uppercase;
    overflow: hidden;
    margin-top: $base-spacing-sm;
    margin-bottom: $base-spacing-sm;
    overflow-wrap: break-word;
  }

  .content {
    padding-top: $base-spacing-xsm;
    .image {
      background: center;
      background-size: cover;
      float: left;
      height: 120px;
      width: 50%;
      max-width: 200px;
      margin-top: $base-spacing-xs;
      margin-bottom: $base-spacing-xs;
      margin-right: $base-spacing-xsm;
      margin-left: $base-spacing-xxs;
    }
    .description {
      text-align: justify;
      word-break: break-word;
    }
  }
}



.double-post {
  flex: 1;
  margin-bottom: 45px;
  max-height: 95%;

  .post-item {
    height: 50%;
    max-height: 50%;
    overflow: hidden;

    &:first-child {
      border-bottom: 1px solid;
    }
  }
}

.single-post {
  flex: 1;
  margin-bottom: 45px;
  max-height: 95%;

  .post-item {
    height: 90%;
    min-width: 90%;
    margin-top: $base-spacing-md;
    margin-bottom: 0;
    margin-left: $base-spacing;
    margin-right: $base-spacing;
    border: 1px solid;
  }
}



.posts-carousel-container {
  position: absolute;
  width: 100%;
  height: 100%;

  .pusher,
  .slick-slider,
  .slick-list,
  .slick-track {
    height: 100%;

    .slick-slide {
      display: flex;
      flex-direction: column;
    }
}

  * {
    border-color: $border-color !important;
  }
}



.ui.menu-pages.sidebar {
  border-color: $border-color;
  i {
    color: $buttons-icon-color;
  }
  .list {
    padding: $base-spacing;
    width: 100%;

    .header {
      font-family: $base-font-family, sans-serif;
      color: $base-text-color;
      margin-top: $base-spacing-sm;

      .icon {
        text-align: left;
        margin-right: 0;
        width: 1em;
      }
    }

    .item {
      display: flex;
      align-items: center;
      border-color: $border-color;
      padding-top: 0.5rem !important;
      padding-bottom: 0.7rem !important;

      .content {
        display: flex;
        align-items: center;

        h3 {
          font-family: $base-font-family, sans-serif;
          color: $base-text-color;
        }
      }

      .icon.triangle {
        position: absolute;
        right: 0;
        padding-right: 0;
        text-align: right;
      }
    }
  }
}

/* added to the body element when shown; prevent scrolling */
.react-router-modal__modal-open {
  overflow: hidden;
}

/* container that contains all modals and backdrops */
.react-router-modal__container {
  position: fixed;
  z-index: 1000
}

/* backdrop shown behind each modal */
.react-router-modal__backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-color: rgba(0,0,0,0.5)
}

/* wrapper element for the modal component */
.react-router-modal__modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border-radius: 5px;
  border: 1px solid #777
}

/* mobile devices, particularly iOS, have some quirks to work around */
@media only screen and (max-device-width: 1024px) {
  .react-router-modal__modal-open {
    position: fixed;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .react-router-modal__container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translate3d(0, 0, 0)
  }
}
