@use 'sass:color';
@use 'materialize';
@use 'themes';

$small-screen: 601px;
$landing-text-color: #3F3F3F;
$theme: themes.$default_color_theme;
$text-primary-color: themes.getColor($theme, 'text-primary');
$text-secondary-color: themes.getColor($theme, 'text-secondary');
$icon-warning-color: themes.getColor($theme, 'icon-warning');

@mixin panel($lateral-padding: 2rem){

  grid-template-areas: 'title'
                       'content'
                       'content'
                       'content'
                       'action';

  @include materialize.card;

  padding: 0;
  min-height: 250px;
  grid-column-gap: 24px;
  grid-row-gap: 2vh;
  grid-template-rows: 80px auto 32px;

  & > span.title {
    @include materialize.card-title;
    display: flex;
    justify-content: end;
    padding: 1vh $lateral-padding;
  }

  & > div.infobox {
    @include materialize.card-content;
    padding: 0 $lateral-padding;
    justify-self: baseline;
  }

  & > ul.action-menu {
    @include materialize.card-action;
    display: flex;
    justify-content: space-between;
    padding-left: $lateral-padding;
  }
}


// site-wide generic classes
.hidden {
  display: none !important;
}

p {
  color: $text-primary-color;
}

button {
  @include materialize.button();
  @include materialize.color-theme();
}

.empty {
  flex: 1 0 auto;
  justify-content: center;
  flex-wrap: wrap;
  @include materialize.valign;

  i {
    flex-basis: 100%;
    text-align: center;
    font-size: 20rem;
    color: $text-secondary-color;
  }

  .call-to-action {
    width: 66%;
    text-align: center;

    .primary, .secondary {
      display: block;
      color: $text-secondary-color;
    }
  }
}

.call-to-action {
  button {
    display: block;
    width: 100%;
  }
}

a.action-link:hover {
  cursor: pointer;
}

a.brand-logo img {
  max-height: 32px;
  margin: 0 18px;
  margin-bottom: -0.25em;
}

// Page layout
body {
  display: grid;
  min-height: 100vh;
  grid-template-rows: [header] 64px [body] minmax(30vh, 1fr) [footer] auto;

  main {
    display: flex;
    flex-flow: column;

    p {
      @include materialize.flow-text;
      &.tagline {
        margin-top: 0;
        font-size: 14pt;
        font-weight: 500;
      }
    }
  }

  footer {
    background-color: #e1e1e1 !important;
    margin-top: 12vh;

    a, div {
      color: #606060 !important;
    }
  }

  &.landing {
    div.section {
      color: $landing-text-color;
    }
  }
}

nav, .btn, .btn-large {
  @include materialize.color-theme();
}

nav {
  ul.dropdown-content {
    min-width: 15em !important;
    top: 5.25vh !important;

    li.dropdown-content-header {
      font-weight: 900;
      text-transform: uppercase;
      @include materialize.dropdown-content();
    }

    &.notification {
      min-width: 455px !important;

      li.notification-event {
        display: inline-grid !important;
        grid-template-areas: "icon message message" "icon message message" "icon timestamp timestamp";
        padding: 0.25em 15px;

        i.material-icons {
          grid-area: icon;
          align-self: center;
        }

        span {
          padding: 0;
        }

        span.message {
          grid-area: message;
          align-self: end;
        }

        span.time {
          grid-area: timestamp;
          color: $text-secondary-color;
          align-self: start;
        }
      }
    }
  }
}

// Page-specific

// Landing page

section.services-provided, section.features, section.pricing, section.why {
  margin-bottom: 3vh;
  &:last-child {
    margin-bottom: 10vh;
  }

  > ul {
    margin: 4vh auto;
  }
}

section.services-provided {
  > ul {
    @include materialize.responsive-list();
  }

  a {
    display: grid;
    color: $landing-text-color !important;
  }

  li {
    @include materialize.card;
    @include materialize.card-horizontal;


    & > span {
      @include materialize.card-title;
    }

    & > p {
      @include materialize.card-content;
    }

    & > img {
      @include materialize.card-image;
      @include materialize.card-horizontal-image;
      min-width: 80px;
      width: 80px;
    }
  }
}

section.features {
  ul {
    @include materialize.responsive-list();
  }
}

section.pricing {
  table.pricing-list {
    margin: 3vh auto;
    max-width: 80%;

    button {
      @include materialize.icon-after("add_shopping_cart");
    }
    ul.service-list > li {
      display: inline;
      img.logo {
        display: inline;
        max-height: 25px;
      }
    }
  }
}

ul.announcements {
  li {
    @include materialize.flow-text;
    background-color: #F0F0F0;
    border-left: 1px dashed #CCC;
    padding: 1em 2em;

    a {
      float: right;
    }
  }
}

ul.events {
  li.collection-item {
    span.title {
      font-size: 60%;
    }
  }
}

// Onboarding page

ul.onboarding-options {
  @include materialize.responsive-card-list(360px);

  > li {
    @include panel();
  }
}

// Dashboard
div.dashboard, ul.dashboard-stats, ul-communick-services, ul.managed-instances {
  margin-bottom: 5em;
}

ul.communick-services, ul.dashboard-stats, ul.managed-instances {
  $lateral-padding: 2rem;
  $vertical-padding: 1vh;

  @include materialize.responsive-card-list(350px);

  & > li {
    @include panel($lateral-padding);

    grid-template-areas: 'logo logo title title title'
                         'logo logo title title title'
                         'content content content content content'
                         'content content content content content'
                         'content content content content content'
                         'action action action action action';

    &.empty-state {
      grid-template-areas: none;
      grid-template-rows: none;
      border: 2px dashed #DDD;
      box-shadow: none;

      align-content: center;
      justify-content: center;
      font-size: 150%;

      a {
        width: 100%;
        height: 100%;
      }
    }

    img.logo, span.title {
      margin-top: 1vh;
      align-self: center;
    }

    img.logo {
      grid-area: logo;
      max-height: 80px;
      max-width: 100px;
      padding-left: $lateral-padding;
      padding-top: $vertical-padding;
    }

  }
}

ul.communick-services, ul.managed-instances, section.services-provided ul {
  li.service:not(.available){
    filter: grayscale(100%);
  }
}

ul.dashboard-stats {
  & > li {
    grid-template-areas: 'title title title title title' '. . . data data' '. . . data data' 'content content content content content' '. . . . .' 'action action action action action';

    span.title {
      justify-content: start;
      padding-left: 2rem;
    }

    .data-summary {
      grid-area: data;
      font-size: 28px;
      line-height: 40px;
      margin-bottom: 3vh;
      text-align: right;
      margin-right: 1em;
      color: lighten($text-primary-color, 30);

      &.amount-value {
        font-size: 40px;
      }
    }
  }
}

ol.getting-started-steps {
  font-size: 24pt;
  text-align: center;
  list-style-position: inside;
}

div.account-info {
  &.balance {
    color: #999;

    span.balance-value {
      font-size: 200%;
    }
  }
}

// Service Integrations
ul.integration-actions {
  li.tbd {
    color: $text-secondary-color;
    text-decoration: line-through;
    @include materialize.icon-after("block");

  }
}

main.twitter-importer {
  ul.profiles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5vh 1rem;

    &.imported > li {
      min-width: 200px;

      @include materialize.card;
      @include materialize.card-horizontal;

      img {
        @include materialize.card-image;
        @include materialize.card-horizontal-image;
        grid-row: 1 / span 3;
      }

      a.handle {
        @include materialize.card-content;
      }

      span.profile {
        @include materialize.card-title;
      }
    }

    &.failed li {
      list-style-type: disc;
      width: 100%;
      margin-left: 2rem;

      img {
        display: none;
      }
    }
  }
}

// Payment Buttons

button[name=setup-stripe-subscription],button[name=close-contract],button[name=collective-setup-payment]  {
  display: block;
  margin: 4vh auto;
  max-width: 250px;
}

button[name=setup-stripe-subscription],button[name=collective-setup-payment] {
  @include materialize.icon-after("credit_card");
}


// Collective

main.collective.pledge, main.collective.directory {
  $profile-avatar-size: 80px;

  ul.collective-member-allocation-list, ul.collective-member-directory {
    @include materialize.responsive-list();

    > li {
      @include materialize.card;
      @include materialize.card-horizontal;
      grid-template-areas: 'avatar avatar title title title'
                         'avatar avatar title title title'
                         'content content content content content'
                         'content content content content content'
                         'content content content content content'
                         'action action action action action';

      img {
        @include materialize.card-image;
        @include materialize.card-horizontal-image;
        height: $profile-avatar-size;
        clip-path: circle();
        grid-area: avatar;
      }

      span.member-title {
        @include materialize.card-title;
        grid-area: title;
      }

      div.summary {
        @include materialize.card-content;
        grid-area: content;
      }

      div.control-panel {
        @include materialize.card-action;
        grid-area: action;
      }
    }
  }
}


main.collective.member {
  $max-profile-size: 200px;
  img {
    display: block;
    margin: 0 auto;
    max-height: $max-profile-size;
    max-width: $max-profile-size;
    clip-path: circle();
  }

  div.cta.support-member {
    max-width: 60%;
    margin: 5vh auto;
    text-align: center;
  }
}

// Documentation
main.documentation {
  ul li {
    list-style-type: disc;
  }

  ul, ol {
    padding-left: 2rem;

  }
}

main.documentation.service {
  @include materialize.flow-text;

  @media only screen and (min-width: 1280px) {
    grid-template-columns: 2fr 1fr;
    grid-column-gap: 6rem;
    grid-template-areas: "header header" "description infobox" "description infobox";

  }

  @media only screen and (max-width: 1280px) {
    grid-template-columns: 100%;
    grid-template-areas: "header" "description" "infobox";
  }

  display: inline-grid;
  grid-template-rows: minmax(auto, 10vh) repeat(auto);

  > h1 {
    grid-area: header;
  }

  section.description {
    grid-area: description;

    > div.rich-text > p {
      margin-top: 0;
    }
  }

  section.service-client-infobox {
    @include materialize.flow-text;

    grid-area: infobox;

    > h5, h6 {
      margin-top: 0;
    }

    p {
      margin: 0;
    }

    ul {
      li {
        &::before {
          vertical-align: middle;
        }

        &.android {
          @include materialize.icon-before("android");
        }

        &.ios {
          @include materialize.icon-before("phone_iphone");
        }

        &.linux, &.windows, &.macos {
          @include materialize.icon-before("desktop_windows");
        }

        &.web {
          @include materialize.icon-before("open_in_browser");
        }
        a {
          color: inherit !important;
        }
      }
    }
  }

  section.links {
    ul {
      li {
        list-style-type: disc;
        list-style-position: inside;
      }
    }
  }
}

// Shopping
div.card.product, div.card.contract {
  div.card-image img {
    max-height: 150px;
    object-fit: contain;
  }
}

div.card.unavailable {
  div.card-image img {
    filter: grayscale(100%);
  }
}

div.legal-cta {
  font-size: 80%;
}

div.ticket-detail .card-image {
  color: #CCC;
}

div.billing-details {
  margin-top: 3vh;
}

div.unavailable-reason {
  margin-top: 1vh;
}

// Services Page (Catalog)
ul.packages.catalog, ul.packages.shopping-cart {
  width: 100%;
  display: table;
  margin-bottom: 10vh;

  li {
    display: table-row;

    > * {
      display: table-cell;
    }
    .package-info {
      padding: 1vh 1em;
    }
  }

  button[name=remove-from-cart] {
    @include materialize.button-icon('clear');
  }

  span.item span.name, span.pricing span.price {
    font-size: 150%;
  }

  span.item span.size, span.pricing span.conditions {
    color: color.grayscale($text-primary-color);
  }

  span.item, span.pricing {
    span {
      display: block;
    }
  }

  ul.services {
    padding: 0 1em;

    li {
      display: inline;
      span.service-detail.name {
        display: none;
      }

      img.logo {
        display: inline;
        max-height: 25px;
      }
    }
  }

  li.empty {
    & > i, div {
      display: block;
      width: 100%;
      justify-self: center;
      align-self: center;
    }
  }
}

// Invite page
section.invite-email-sample {
  margin: 5vh auto 10vh;

  blockquote {
    white-space: pre-line;
  }
}

#payment-method-selector {
  div.card-panel {
    min-height: 4em;
    cursor: pointer;

    &.selected {
      box-shadow: 0 8px 17px 2px rgba(0, 121, 107, 0.14), 0 3px 14px 2px rgba(0, 121, 107, 0.12), 0 5px 5px -3px rgba(0, 121, 107, 0.2);
      border: 1px solid #00796b;
      color: #00796b;
    }
  }
}

div.amount-display {
  span {
    display: inline-block;
    width: 100%;
    font-size: 36pt;
  }
}

// Service Lander Pages
main.service.lander {
  @include materialize.flow-text;
  display: inline-block;
  padding-bottom: 5vh;

  section.header {
    display: grid;
    grid-template-areas: 'header logo'
                         'tagline logo';
    grid-template-columns: 1fr 160px;

    h2 {
      grid-area: header;
    }

    h4 {
      grid-area: tagline;
      margin-top: 0;
    }

    img.service.logo {
      max-width: 100%;
      max-height: 100%;
      grid-area: logo;
      align-self: center;
      margin: auto;
    }

  }

  section.screenshots {
    margin: 4vh auto;

    div.carousel {
      margin: auto;
    }
  }
}

// Documentation Pages
main.documentation {
  @include materialize.flow-text;
  display: inline-block;
  padding-bottom: 5vh;

  .info, .warning {
    @include materialize.z-depth-2;
    @include materialize.card-panel;
    padding-left: 1rem;
    display: flex;
    align-items: center;

    &::before {
      margin-right: 1rem;
      font-size: 2rem;
    }
  }

  .info {
    @include materialize.icon-before('info');
  }

  .warning {
    @include materialize.icon-before('warning');

    &::before {
    color: $icon-warning-color;
    }
  }

  .title {
    font-size: 3.2rem;
  }

  h3 {
    font-size: 2.2rem;
  }
}