@import "../settings/cards";
@import "../settings/colors";
@import "../settings/media";
@import "../settings/page";
@import "../settings/typography";

@import "../tools/mixins/baseline";
@import "../tools/mixins/core";
@import "../tools/mixins/grid";
@import "../tools/mixins/spacing-responsive";
@import "../tools/mixins/vendor-prefixes";
/* ---------- CARDS ---------- */

.cui-card-container {
  padding-left: $page-side-padding - $card-padding-horizontal;
  padding-right: $page-side-padding - $card-padding-horizontal;
  width: 100%;
  display: flex;
  flex-direction: column;
  &.multiple-layouts {
    @media #{$small-up} {
      display: inline;
    }
    @media #{$large-up} {
      display: flex;
      flex-direction: row;
    }
  }
}

.cui-card-layout {
  &.cui-card-block {
    @include vr-spacing(ph, 1);
    @include grid-row($behavior: nest);
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    &>.cui-card {
      display: flex;
      clear: none !important;
    }
  }
  &.fourth,
  &.cui-card-layout--fourth {
    @media #{$small-up} {
      width: 100%;
    }
    @media #{$medium-up} {
      width: 100%;
      max-width: 50%;
    }
    @media #{$large-up} {
      width: 25%;
    }
  }
  &.three-fourths,
  &.cui-card-layout--three-fourths {
    @media #{$small-up} {
      width: 100%;
    }
    @media #{$large-up} {
      width: 75%;
    }
  }
  &.third,
  &.cui-card-layout--third {
    @media #{$small-up} {
      width: 100%;
    }
    @media #{$large-up} {
      width: 33.3334%;
    }
  }
  &.two-thirds,
  &.cui-card-layout--two-thirds {
    @media #{$small-up} {
      width: 100%;
    }
    @media #{$large-up} {
      width: 66.6667%;
    }
  }
}

.cui-card {
  line-height: $base-line-height;
  float: left;
  @include vr-spacing(mt, 1);
  @include vr-spacing(ph, $card-padding-horizontal);
  &.small,
  &.cui-card--small {
    @media #{$small-up} {
      width: 100%;
    }
    @media #{$medium-up} {
      width: 50%;
    }
    @media #{$large-up} {
      width: 25%;
    }
  }
  &.medium,
  &.cui-card--medium {
    @media #{$small-up} {
      width: 100%;
    }
    @media #{$medium-up} {
      width: 50%;
    }
    @media #{$large-up} {
      width: 33.3334%;
    }
  }
  &.large,
  &.cui-card--large {
    @media #{$small-up} {
      width: 100%;
    }
    @media #{$medium-up} {
      width: 66.6667%;
    }
    @media #{$large-up} {
      width: 50%;
    }
  }
  &.x-large,
  &.cui-card--x-large {
    @media #{$small-up} {
      width: 100%;
    }
    @media #{$medium-up} {
      width: 100%;
    }
    @media #{$large-up} {
      width: 66.6667%;
    }
  }
  &.full,
  &.cui-card--full {
    @media #{$small-up} {
      width: 100%;
    }
  }
  >article {
    position: relative;
    width: 100%;
    background-color: $card-color;
    border-radius: $card-border-radius;
    @include box-shadow(0px 1px 2px 1px rgba(52, 53, 55, 0.18));
    color: $text-color;
    display: flex;
    flex-direction: column;
    vertical-align: top;
    header {
      width: 100%;
      @include vr-spacing(ph, 1);
      @include vr-spacing(pt, .5);
      text-align: left;
      border-top-left-radius: $card-border-radius;
      border-top-right-radius: $card-border-radius;
      &.align-right {
        text-align: right;
      }
      &.align-center {
        text-align: center;
      }
      .header-with-right-icon {
        display: flex;
        justify-content: space-between;
        align-items: center;
        h5 {
          @include vr-spacing(pr, 1);
        }
        button {
          @include vr-spacing(p, 0);
        }
      }
      i.icon-arrow-next:before {
        transition: all .25s ease 0s;
        display: inline-block;
        transform: rotate(90deg);
      }
      &.open-panel i.icon-arrow-next:before {
        transform: rotate(-90deg);
      }
    }
    footer {
      width: 100%;
      @include vr-spacing(ph, 1.5);
      @include vr-spacing(pb, 1);
      &.footer-menu {
        background-color: $gray-7;
        @include vr-spacing(pt, .5, 1px);
        @include vr-spacing(pb, .5, 2px);
        @include vr-spacing(ph, 1.5);
        color: $gray-4;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .footer-content {
          display: flex;
          align-items: center;
          width: 100%;
          min-height: rem(20);
        }
        &.overview-footer-content-trial {
          .footer-content {
            justify-content: space-between;
          }
        }
        &.overview-footer-content {
          .footer-content {
            justify-content: flex-end;
          }
        }
        .footer-icons {
          display: flex;
          font-size: rem(20);
          align-items: center;
          a {
            color: $gray-4;
            &:focus {
              box-shadow: none;
            }
          }
          .menu-icon {
            &:hover {
              cursor: pointer;
            }
          }
        }
        .right-footer-icons {
          justify-content: flex-end;
        }
      }
    }
  }
  &.medium,
  &.cui-card--medium,
  &.large,
  &.cui-card--large,
  &.full,
  &.cui-card--full {
    >article {
      header {
        @include vr-spacing(ph, 1.5);
        @include vr-spacing(pt, 1.5);
      }
    }
  }
  .full.no-padding {
    >article {
      header {
        padding: 0;
      }
    }
  }
  .card-menu {
    transform: translateY(100%);
    height: 0;
    width: 0;
    transition: transform 0.6s ease;
    overflow: hidden;
    &.open {
      position: absolute;
      transform: translateY(0);
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(52, 53, 55, 0.98);
      color: $gray-5;
      transition: transform 0.6s ease;
    }
    .card-menu-heading {
      @include vr-spacing(p, 1.5);
      display: flex;
      justify-content: space-between;
      font-size: rem(26);
    }
  }
  &.header-border {
    header {
      border-bottom: 1px solid $card-divider-color;
      @include vr-spacing(pb, 1);
    }
  }
  &.header-bar {
    header {
      position: relative;
      &:after {
        content: ' ';
        position: absolute;
        top: 0;
        border-top: 5px solid $blue-base;
        height: 5px;
        width: 100%;
        left: 0;
        border-top-left-radius: $card-border-radius;
        border-top-right-radius: $card-border-radius;
      }
    }
    &.meetings {
      header {
        &:after {
          border-top: 5px solid $orange-base;
        }
      }
    }
    &.people {
      header {
        &:after {
          border-top: 5px solid $mint-base;
        }
      }
    }
    &.cta {
      header {
        &:after {
          border-top: 5px solid $green-base;
        }
      }
    }
    &.negative {
      header {
        &:after {
          border-top: 5px solid $red-base;
        }
      }
    }
    &.attention {
      header {
        &:after {
          border-top: 5px solid $yellow-base;
        }
      }
    }
    &.alerts {
      header {
        &:after {
          border-top: 5px solid $red-base;
        }
      }
    }
    &.gray {
      header {
        &:after {
          border-top: 5px solid $gray-4;
        }
      }
    }
  }
  &.header-img {
    >article {
      header {
        @include vr-spacing(p, 0);
        img {
          width: 100%;
          border-top-left-radius: $card-border-radius;
          border-top-right-radius: $card-border-radius;
        }
      }
    }
  }
  &.section-background section {
    background-color: $card-background;
    p,
    .card-checkbox,
    ul {
      margin-top: $card-padding-top;
    }
  }
  &.header-background {
    header {
      width: 100%;
      background-color: $blue-base;
      color: $white;
      border-top-left-radius: $card-border-radius;
      border-top-right-radius: $card-border-radius;
      @include vr-spacing(pv, .5);
      a {
        color: $white;
      }
      h4,
      h5 {
        color: $brand-white;
      }
    }
    &.small,
    &.cui-card--small,
    &.medium,
    &.cui-card--medium,
    &.large,
    &.cui-card--large,
    &.x-large,
    &.cui-card--x-large
    &.full,
    &.cui-card--full {
      >article {
        header {
          @include vr-spacing(ph, 1.5);
          @include vr-spacing(pv, .5);
        }
      }
    }
    &.gray {
      header {
        background-color: $gray-2;
      }
    }
    &.people {
      header {
        background-color: $mint-base;
      }
    }
    &.meetings {
      header {
        background-color: $orange-base;
      }
    }
    &.eggplant {
      header {
        background-color: $purple-base;
      }
    }
    &.negative {
      header {
        background-color: $red-base;
      }
    }
    &.cta {
      header {
        background-color: $green-base;
      }
    }
    &.attention {
      header {
        background-color: $yellow-base;
      }
    }
    &.alerts {
      header {
        background-color: $red-base;
      }
    }
    &.gray,
    &.people,
    &.meetings,
    &.eggplant,
    &.negative,
    &.cta,
    &.attention,
    &.alerts {
      header {
        a:hover,
        button:hover {
          color: $gray-6;
        }
      }
    }
  }
  section {
    flex: 1 1 auto;
    width: 100%;
    overflow: auto;
    p,
    ul,
    .card-section-content,
    .card-notification,
    .card-checkbox {
      @include vr-spacing(ph, 1);
      @include vr-spacing(pv, 1);
    }
    .card-button {
      text-align: center;
      @include vr-spacing(pl, 1.5);
      @include vr-spacing(pr, 1.5);
      button {
        @include vr-spacing(mb, 0.5);
      }
      display: flex;
      flex-direction: column
    }
    h4 {
      @include vr-spacing(pt, 1);
    }
    &.section-img>img {
      width: 100.80%;
    }
    .card-checkbox cui-checkbox {
      display: block;
    }
    .card-radio {
      height: 100%;
    }
    fieldset {
      @include vr-spacing(m, 0);
    }
    ul {
      li,
      div>a {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        line-height: 1.5rem;
      }
    }
  }
  &.medium,
  &.cui-card--medium,
  &.large,
  &.cui-card--large,
  &.x-large,
  &.cui-card--x-large
  &.full,
  &.cui-card--full {
  p,
    ul,
    .card-section-content,
    .card-notification,
    .card-checkbox,
    .card-button {
      @include vr-spacing(ph, 1.5);
      @include vr-spacing(pv, 1);
    }
    .card-notification {
      .notification-msg {
        @include vr-spacing(pt, 1);
        display: inline-flex;
        @media #{$large-up} {
          flex-direction: row;
        }
        .msg {
          line-height: rem(24);
          color: $gray-2;
          font-family: $brand-font-light;
          padding-left: rem(16);
          @media #{$large-up} {
            width: 66.7%;
          }
        }
        border-bottom: 1px solid $gray-6;
        &:last-child {
          border-bottom: none
        }
      }
    }
  }
  &.cui-card--1,
  &.cui-card--2,
  &.cui-card--3,
  &.cui-card--4,
  &.cui-card--5,
  &.cui-card--6,
  &.cui-card--7,
  &.cui-card--8,
  &.cui-card--9,
  &.cui-card--10,
  &.cui-card--11,
  &.cui-card--12 {
    width: 100%;
  }
}

@media #{$medium-up} {
  .cui-card {
    &.cui-card--1 {
      width: 8.33333%;
    }
    &.cui-card--2 {
      width: 16.66667%;
    }
    &.cui-card--3 {
      width: 25%;
    }
    &.cui-card--4 {
      width: 33.33333%;
    }
    &.cui-card--5 {
      width: 41.66667%;
    }
    &.cui-card--6 {
      width: 50%;
    }
    &.cui-card--7 {
      width: 58.33333%;
    }
    &.cui-card--8 {
      width: 66.66667%;
    }
    &.cui-card--9 {
      width: 75%;
    }
    &.cui-card--10 {
      width: 83.33333%;
    }
    &.cui-card--11 {
      width: 91.66667%;
    }
    &.cui-card--12 {
      width: 100%;
    }
  }
}

.service-card {
  display: flex;
  justify-content: space-around;
  height: 100%;
  width: 100%;
  div {
    &.left-side {
      border-right: 1px solid $gray-6;
      @include vr-spacing(mv, 1.5);
      @include vr-spacing(pv, 2);
      @include vr-spacing(ph, 1.5, 1px);
      @media #{$small-up} {
        border-bottom: 1px solid $gray-6;
        @include vr-spacing(mh, 1.5);
      }
      @media #{$medium-up} {
        @include grid-column($columns: 6);
        border-right: 1px solid $gray-6;
        border-bottom: none;
        @include vr-spacing(mh, 0);
      }
      width: 50%;
      .service-name {
        display: flex;
        align-items: center;
        span {
          font-size: rem(36);
          font-family: $brand-font-thin;
          color: $gray-2;
        }
      }
      &.no-line {
        border-right: none;
        border-bottom: none;
      }
      &.long-overview-title {
        @include vr-spacing(pb, 3.25);
      }
    }
    &.right-side {
      width: 50%;
      @include vr-spacing(pv, 1.5);
      @include vr-spacing(ph, 1);
      @media #{$small-up} {
        @include vr-spacing(mh, 1.5);
      }
      @media #{$medium-up} {
        @include grid-column($columns: 6);
      }
      p {
        @include vr-spacing(ph, 0);
      }
      .overview-title {
        color: $blue-base;
        font-family: $brand-font-light;
      }
      .overview-count {
        @include vr-spacing(pt, 1);
        font-size: rem(48);
        font-family: $brand-font-thin;
        line-height: 1;
        &.last {
          color: $gray-5;
        }
        &.current {
          color: $text-color;
        }
      }
      .overview-time {
        color: $gray-5;
      }
    }
  }
}

.site-overview {
  section {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  a {
    font-size: rem(16);
  }
}

.configure-card {
  display: flex;
  justify-content: space-around;
  @media #{$small-up} {
    flex-direction: column;
  }
  @media #{$medium-up} {
    flex-direction: row;
  }
  div {
    &.left-side {
      @include vr-spacing(pt, 2);
      @include vr-spacing(pb, 1);
      @include vr-spacing(ph, 1.5, 1px);
      @media #{$small-up} {
        width: 100%;
        border-bottom: 1px solid $gray-6;
        border-right: none;
      }
      @media #{$medium-up} {
        width: 50%;
        border-bottom: none;
      }
      @media #{$large-up} {
        width: 33.333%;
      }
      .service-name {
        display: inline-flex;
        align-items: flex-start;
        justify-content: center;
        span {
          padding-left: 15px;
          font-size: rem(32);
          font-family: $brand-font-extra-light;
        }
      }
    }
    &.right-side {
      display: flex;
      justify-content: flex-end;
      @media #{$small-up} {
        width: 100%;
      }
      @media #{$medium-up} {
        width: 50%;
      }
      @media #{$large-up} {
        width: 66.667%;
      }
      .configure-card-heading {
        @include vr-spacing(pl, 0.5);
        @media #{$small-up} {
          text-align: center;
          width: 100%;
        }
        @media #{$large-up} {
          width: 50%;
        }
      }
      .configure-content {
        display: flex;
        @media #{$small-up} {
          flex-direction: column;
          justify-content: center;
        }
        @media #{$medium-up} {
          flex-wrap: wrap;
          flex-direction: row;
        }
        @media #{$large-up} {
          flex-wrap: nowrap;
          justify-content: space-around;
        }
        >div {
          @media #{$medium-up} {
            width: 50%;
          }
        }
      }
      .overview-title {
        color: $blue-base;
        font-family: $brand-font-light;
      }
      .overview-count {
        @include vr-spacing(pt, 1);
        font-size: rem(48);
        font-family: $brand-font-thin;
        line-height: 1;
        color: $mint-base;
      }
      .overview-icon {
        @include vr-spacing(pv, 1);
        @include vr-spacing(ph, 1.5);
        display: flex;
        flex-direction: column;
        i {
          font-size: rem(48);
          color: $text-color;
          &:hover {
            color: $link-hover-color;
          }
        }
      }
    }
  }
}

.footer-content {
  i {
    font-size: rem(8);
    @include vr-spacing(pr, .5);
    @include vr-baseline(12, 14, false, 2);
  }
  ul {
    @include vr-spacing(ph, 0);
    list-style-type: none;
    text-align: left;
  }
}

.card-circle-icon {
  display: block;
  height: rem(32);
  width: rem(32);
  border-radius: 50%;
  background-color: $gray-7;
  @include vr-spacing(p, .25);
  @include vr-spacing(pt, .5);
  text-align: center;
}

.overview-card {
  article {
    text-align: center;
    header {
      text-align: center;
      @include vr-spacing(pt, 1);
      @include vr-spacing(pb, .5);
    }
    .overview-info {
      font-size: rem(16);
      color: $gray-4;
      @include vr-spacing(pv, 1);
      font-family: $brand-font-light;
    }
    .overview-count {
      font-size: rem(48);
      font-family: $brand-font-thin;
      color: $blue-base;
      margin-bottom: .5rem;
    }
    .last-count {
      font-size: rem(14);
      color: $gray-2;
    }
    .footer-content {
      .label {
        font-size: rem(12);
        font-family: $brand-font-regular;
      }
    }
  }
}

.overview-header {
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    font-size: inherit;
    line-height: 1;
    margin-top: 2px;
  }
  color: $gray-1;
  font-size: rem(26);
  font-family: $brand-font-extra-light;
  i {
    color: $gray-2;
    font-size: rem(32);
    margin-right: .5rem;
  }
}

.overview-paragraph {
  font-size: rem(16);
  color: $gray-2;
}

.side-info-card {
  header {
    div {
      font-size: rem(20);
      font-family: $brand-font-light;
      color: $gray-2;
    }
  }
  .overview-info {
    text-align: center;
    .overview-count {
      font-size: rem(36);
      color: $yellow-base;
      font-family: $brand-font-thin;
    }
  }
  .footer-content {
    @include vr-spacing(pl, .5);
    @include vr-spacing(mt, 1);
    ul {
      @include vr-spacing(p, 0);
      @include vr-spacing(pt, 1);
      border-top: 1px solid $gray-6;
      font-family: $brand-font-light;
    }
  }
}


/* ---------- END CARDS ---------- */