// Home Page Pattern
//==================================================//

// Moved some of this stuff to `<project-root>/sass/controls/_card.scss`.

// Different Widget Heights and Widths
.homepage-background {
  background-color: $homepage-background-color;
}

.homepage {
  background-color: $homepage-background-color;
  height: inherit;
  margin: 0 auto;
  padding: 0;
  position: relative;

  .card,
  .small-widget,
  .widget {
    height: 368px;
    left: 0;
    position: absolute;
    top: 0;
    width: 360px;

    // Edit mode is on
    &[draggable] {
      overflow: initial;
    }

    &::after {
      content: '';
      display: inline-block;
      height: 16px;
      position: absolute;
      top: 368px;
      width: 10px;
    }

    &.banner {
      height: 380px;
      background: none;
      border: none;
      box-shadow: none;

      .widget-content {
        height: 420px;
        overflow-y: hidden;
      }

      .circlepager {
        height: 417px;

        .slide {
          height: 368px;
          margin: 0 2px;

          &.is-visible.transition {
            transition: opacity 0.1s ease 0s;
          }

          .small-widget {
            height: 318px;
            min-height: 318px;
            width: 358px;
          }
        }
      }
    }
  }

  .small-widget {
    height: 260px;
    width: 260px;

    &:last-child::after {
      height: 24px;
      top: 260px;
    }
  }

  .card:hover .card-remove,
  .small-widget:hover .card-remove,
  .widget:hover .card-remove {
    background: #ec1225;
  }

  > .content {
    left: 50%;
    top: 16px;
    margin-left: -500px;
    margin-top: 16px;
    position: absolute;

    &.has-banner-icon {
      margin-top: 76px;
    }
  }

  .drop-indicator {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: absolute;
    top: 0;
    width: 6px;
  }

  .drop-indicator .edge {
    background-color: rgb(37, 120, 169);
    border-radius: 3px;
    flex: 0 0 6px;
    width: 6px;
  }

  .drop-indicator .line {
    background-color: rgb(37, 120, 169);
    flex: 1 0 auto;
    width: 2px;
  }

  .ui-resizable-handle {
    height: 14px;
    position: absolute;
    width: 14px;
  }

  .card-remove {
    background: #5c5c5c;
    border-radius: 100%;
    height: 22px;
    position: absolute;
    right: -16px;
    top: -10px;
    transition: background-color 0.2s;
    width: 22px;
    z-index: 100;
  }

  .card-remove svg {
    color: #fff;
    top: 1.5px;
    width: 12px;
  }

  .ui-resizable-handle::before {
    background: $widget-editable-border-color;
    border-radius: 100%;
    content: '';
    display: block;
    height: 12px;
    position: absolute;
    width: 12px;
  }

  .ui-resizable-s::before {
    left: 50%;
  }

  .ui-resizable-e::before {
    top: 50%;
  }

  .ui-resizable-e {
    cursor: ew-resize;
    height: 100%;
    right: -8px;
    top: 0;
    width: 14px;
  }

  .ui-resizable-s {
    bottom: -8px;
    cursor: ns-resize;
    height: 14px;
    width: 100%;
  }

  .background-image {
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 272px;
  }

  .banner-icon {
    left: 50%;
    margin-left: -500px;
    margin-top: 24px;
    position: absolute;
    float: left;
    height: 32px;
    min-width: 32px;
    background-repeat: no-repeat;
    background-size: contain;
  }
}

.header + .homepage,
.header + nav + .homepage {
  height: calc(100% - 60px);
  margin-top: 0 !important;
  overflow: auto;
}

.header + .page-container > .homepage {
  height: auto;

  &:has(.content :first-child) {
    height: 100%;
  }
}

.card.double-height,
.widget.double-height {
  height: 752px;

  .widget-content,
  .card-content {
    height: 752px;
    min-height: 752px;
    overflow: auto;
  }

  .widget-header,
  .card-header {
    + .widget-content,
    + .card-content {
      height: 704px;
      min-height: 704px;
    }
  }
}

.small-widget.double-height {
  height: 544px;

  .widget-content,
  .card-content {
    height: 492px;
    min-height: 492px;
    overflow: auto;
  }
}

.card.triple-height,
.widget.triple-height {
  height: 1136px;
}

.card.quad-height,
.widget.quad-height {
  height: 1520px;
}

.card.quintuple-height,
.widget.quintuple-height {
  height: 1904px;
}

.card.sextuple-height,
.widget.sextuple-height {
  height: 2288px;
}

.card.auto-height,
.widget.auto-height {
  height: auto;
  min-height: 0;
  max-height: none;

  .widget-content,
  .card-content {
    height: auto;
    min-height: auto;
    max-height: none;
  }

  .chart-container {
    margin-top: 0;
    padding-bottom: 20px;
    transform: translateY(0);
  }
}

.small-widget.auto-height {
  height: auto;
  min-height: 0;
  max-height: none;

  .widget-content,
  .card-content {
    height: auto;
    min-height: auto;
    max-height: none;
  }

  .chart-container {
    padding-bottom: 24px;
  }
}

.card.full-height,
.small-widget.full-height,
.widget.full-height {
  height: 100%;
}

.card.double-width.to-single,
.widget.double-width.to-single,
.card.triple-width.to-single,
.widget.triple-width.to-single,
.card.quad-width.to-single,
.widget.quad-width.to-single,
.card.quintuple-width.to-single,
.widget.quintuple-width.to-single,
.card.sextuple-width.to-single,
.widget.sextuple-width.to-single {
  width: 360px; // 360 (single)
}

.small-widget.double-width.to-single,
.small-widget.triple-width.to-single,
.small-widget.quad-width.to-single,
.small-widget.quintuple-width.to-single,
.small-widget.sextuple-width.to-single {
  width: 260px; // 260 (single)
}

.card.double-width,
.widget.double-width,
.card.triple-width.to-double,
.widget.triple-width.to-double,
.card.quad-width.to-double,
.widget.quad-width.to-double,
.card.quintuple-width.to-double,
.widget.quintuple-width.to-double,
.card.sextuple-width.to-double,
.widget.sextuple-width.to-double {
  width: 736px; // (360 * 2) + 16
}

.small-widget.double-width,
.small-widget.triple-width.to-double,
.small-widget.quad-width.to-double,
.small-widget.quintuple-width.to-double,
.small-widget.sextuple-width.to-double {
  width: 544px; // (260 * 2) + 24
}

.card.triple-width,
.widget.triple-width,
.card.quad-width.to-triple,
.widget.quad-width.to-triple,
.card.quintuple-width.to-triple,
.widget.quintuple-width.to-triple,
.card.sextuple-width.to-triple,
.widget.sextuple-width.to-triple {
  width: 1112px; // (360 * 3) + (16 * 2)
}

.small-widget.triple-width,
.small-widget.quad-width.to-triple,
.small-widget.quintuple-width.to-triple,
.small-widget.sextuple-width.to-triple {
  width: 828px; // (260 * 3) + (24 * 2)
}

.card.quad-width,
.widget.quad-width,
.card.quintuple-width.to-quad,
.widget.quintuple-width.to-quad,
.card.sextuple-width.to-quad,
.widget.sextuple-width.to-quad {
  width: 1488px; // (360 * 4)+(16 * 3)
}

.small-widget.quad-width,
.small-widget.quintuple-width.to-quad,
.small-widget.sextuple-width.to-quad {
  width: 1112px; // (260 * 4) + (24 * 3)
}

.card.quintuple-width,
.widget.quintuple-width,
.card.sextuple-width.to-quintuple,
.widget.sextuple-width.to-quintuple {
  width: 1864; // (360 * 5)+(16 * 4)
}

.small-widget.quintuple-width,
.small-widget.sextuple-width.to-quintuple {
  width: 1396px; // (260 * 5) + (24 * 4)
}

.card.sextuple-width,
.widget.sextuple-width {
  width: 2240; // (360 * 6)+(16 * 5)
}

.small-widget.sextuple-width {
  width: 1680px; // (260 * 6) + (24 * 5)
}

.card.half-height,
.widget.half-width {
  height: 270px;
  min-height: 270px;

  .card-content,
  .widget-content {
    height: 216px;
    min-height: 216px;
  }
}

.small-widget.half-width {
  height: 270px;
  min-height: 270px;

  .card-content,
  .widget-content {
    height: 216px;
    min-height: 216px;
  }
}

// Centering
.widget-content.l-center,
.card-content.l-center {
  overflow: hidden;
  text-align: center;
}

.widget-content.no-scroll,
.card-content.no-scroll {
  overflow: hidden;
}

// Fileupload Advanced styles
.widget-content,
.card-content {
  .fileupload-wrapper .container .file-row .status-icon > .icon {
    top: 2px;
  }
}

// Hero widget
.hero-widget {
  background-color: $header-hero-widget-bg-color;
  color: $font-color-default;
  max-height: 384px;
  min-height: 368px;
  overflow: hidden;
  padding: 8px 0;
  width: 100%;

  &.auto-height,
  &.auto-height .hero-top {
    height: fit-content;
    min-height: 0;
    max-height: none;
  }

  .hero-top {
    height: 368px;
    max-height: 368px;
    min-height: 368px;
  }

  .hero-bottom {
    background-color: $header-bg-color;
    border-bottom: 1px solid $header-hero-text-color;
    height: 40px;
    max-height: 40px;
    min-height: 40px;
    width: 100%;
  }

  .hero-header,
  .hero-content,
  .hero-footer {
    margin: 0 auto;
    max-width: 1500px;
    width: 100%;

    .toolbar {
      padding-left: 15px;
      padding-right: 0;
    }

    .title {
      color: $header-hero-text-color;
      padding-left: 15px;
    }
  }

  .hero-footer {
    padding: 0 15px;
    width: 100%;

    .hero-footer-nav {
      display: inline-block;
      margin: 0;
      padding: 0;

      li {
        display: inline-block;
        height: 40px;
        line-height: 40px;

        &::before {
          @include font-size(20);

          color: $panel-border-color;
          content: '\2758';
          display: inline-block;
          margin-right: 2px;
          padding-top: 2px;
          vertical-align: top;
        }

        &:first-child::before {
          margin-left: 15px;
        }
      }

      a {
        margin-top: 5px;
        border-bottom: 4px solid transparent;

        &.btn-tertiary {
          border-radius: 0;

          &:hover {
            background-color: $header-tab-background-hover-color-new;
            border-bottom-color: $header-tab-indicator-hover-color-new;
            color: $header-tab-hover-color-new;
          }
        }
      }
    }

    .hero-footer-nav-title {
      @include font-size(16);

      display: inline-block;
      height: 40px;
      line-height: 40px;

      &::after,
      &::before {
        content: '';
        display: table;
      }

      &::after {
        clear: both;
      }
    }
  }
}

@media only screen and (max-height: 1250px) {
  .homepage {
    height: auto;

    &:has(.content :first-child) {
       height: calc(100vh - var(--header-height, 75px));
    }
  }
}

@media only screen and (max-width: 1500px) {
  .hero-widget {
    .hero-content {
      max-width: 1120px;
    }
  }
}

@media only screen and (max-width: 1120px) {
  .hero-widget {
    .hero-content {
      max-width: calc(100% - 200px);
    }
  }
}

@media only screen and (max-width: 549px) {
  .hero-widget {
    .hero-content {
      max-width: 100%;
    }

    .hero-bottom {
      display: none;
    }
  }
}

// RTL Styles
html[dir='rtl'] {
  .homepage {
    .ui-resizable-w {
      cursor: ew-resize;
      height: 100%;
      left: -8px;
      right: auto;
      top: 0;
      width: 14px;
    }
    
    .ui-resizable-w::before {
      top: 50%;
      left: var(--dot-offset, 0);
    }
  }

  .hero-widget {
    .hero-header,
    .hero-content,
    .hero-footer {
      .toolbar {
        padding-left: 0;
        padding-right: 15px;
      }
    }

    .hero-footer {
      .hero-footer-nav {
        li {
          &::before {
            margin-left: 2px;
            margin-right: inherit;
          }

          &:first-child::before {
            margin-left: inherit;
            margin-right: 15px;
          }
        }
      }
    }
  }

  .widget-content,
  .card-content {
    .fileupload-wrapper .container .file-row .status-icon > .icon {
      top: 2px;
    }
  }
}

// Responsive homepage mode - cards use fluid widths based on container size
.homepage.is-responsive {
  > .content {
    position: relative;
    left: auto;
    top: auto;
    margin-left: 0;
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    height: calc(100% - 16px);
    margin-top: 0;
  }

  .card,
  .small-widget,
  .widget {
    position: relative;
    left: auto;
    top: auto;
    margin-right: 20px;

    &:last-child {
      margin-right: 0;
    }
  }
}