// ------------------------------
// // Open edX Certificates: Components

// About: styling for specific UI components ranging from global to modular.

// #HEADINGS
// #DEPTH
// #MESSAGES
// #IMAGES

// #HEADER APP
// #BANNER
// #INTRODUCTION
// #ACCOMPLISHMENT
// #RENDERING
// #ACCOMPLISHMENT RELATED
// #CERTIFICATE
// #ABOUT

// ------------------------------
// #HEADINGS
// ------------------------------
%hd-subsection {
  margin-bottom: spacing-vertical(mid-small);
  border-bottom: rem(2) solid palette(grayscale, x-back);
  padding-bottom: spacing-vertical(x-small);
}

// ------------------------------
// #DEPTH
// ------------------------------
%depth-base-focus {
  background: $white;
  padding: spacing-vertical(small) spacing-horizontal(base);
}

%depth-well {
  box-shadow: 0 rem(1) rem(3) 0 palette(grayscale, back) inset;
  padding: spacing-vertical(small) spacing-horizontal(base);
  background: palette(grayscale, x-back);
}

%depth-card {
  box-shadow: 0 rem(1) rem(2) 0 palette(grayscale, back);
  padding: spacing-vertical(small) spacing-horizontal(base);
  background: $white;
}

.depth-base-focus {
  @extend %depth-base-focus;
}

.depth-well {
  @extend %depth-well;
}

.depth-card {
  @extend %depth-card;
}

// ------------------------------
// #IMAGES
// ------------------------------
// circular cropped
%img-cropped {
  .src {
    display: block;
    width: 100%;
    border-radius: 50%;
  }
}

// ------------------------------
// #HEADER APP
// ------------------------------
.wrapper-header {
  @extend %divider-2;

  border-bottom-color: palette(grayscale, x-back);
  background: $white;
}

.header-app {

}

// ------------------------------
// #BANNER
// ------------------------------
.banner {
  .message-copy {
    margin-bottom: 0;
  }
}

// message to user-centric banner
.wrapper-banner-user {
  box-shadow: inset 0 rem(2) rem(2) 0 $black;
  background: palette(grayscale, dark);
}

.banner-user {
  .message-title {
    color: $white;
    font-weight: font-weight(semi-bold);
  }

  .message-copy {
    color: $white;
  }

  .message-actions .action {

    // STATE: hover, active, focus
    &:hover, &:active, &:focus {
      // customizations from UXPL
      color: palette(grayscale, dark);
    }

    .icon {
      @include margin-right(spacing-horizontal(x-small));

      font-size: font-size(large);
    }

    // CASE: icon display only
    &.icon-only {
      .action-label {
        @extend %a11y-hide;
      }
    }

    // CASE mozilla open badges logo
    .icon-mozillaopenbadges {
      width: rem(18);
    }
  }
}

// ------------------------------
// #INTRODUCTION
// ------------------------------
.introduction {
  margin-bottom: spacing-vertical(base);

  @include text-align(center);
}

// ------------------------------
// #ACCOMPLISHMENTS
// ------------------------------
// base accomplishment
.accomplishment {
  .accomplishment-type-symbol .src {
    display: block;
    width: 100%;
  }
}

// main accomplishment
.accomplishment-main {
  background: palette(grayscale, x-back);
}

// brief accomplishment
.accomplishment-brief {
  @extend %depth-card;

  .accomplishment-type-symbol, .accomplishment-details {
    display: inline-block;
    vertical-align: middle;
  }

  .accomplishment-type-symbol {
    @include size(20%);
  }

  .accomplishment-details {
    width: 70%;
  }


  .accomplishment-summary {
    margin-bottom: 0;
  }
}

// ------------------------------
// #RENDERING
// ------------------------------
%rendering-accomplishment-line {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

%rendering-section {
  margin-bottom: spacing-vertical(base);
  border-bottom: rem(2) solid palette(grayscale, x-back);
  padding-bottom: spacing-vertical(base);
}

%rendering-hd-section {
  margin-bottom: spacing-vertical(mid-small);
  border-bottom: rem(2) solid palette(grayscale, x-back);
  padding-bottom: spacing-vertical(x-small);
  color: $cert-base-color;

  @include text-align(center);
}

.accomplishment-rendering {
  @extend %depth-card;

  position: relative;
  top: -(spacing-vertical(base));
  border-top: rem(4) solid $cert-base-color;

  // type
  .accomplishment-type {
    @include text-align(center);

    margin-top: -(spacing-vertical(large));
    margin-bottom: spacing-vertical(base);
  }

  .accomplishment-type-label, .accomplishment-type-symbol {
    display: block;
  }

  .accomplishment-type-label {
    @include span(10);

    margin: 0 auto;
    font-weight: font-weight(semi-bold);
  }

  .accomplishment-type-symbol {
    @include size(rem(100));

    margin: 0 auto spacing-vertical(small) auto;
  }

  // statement
  .accomplishment-statement {
    @extend %rendering-section;

    @include text-align(center);
  }

  .accomplishment-statement-lead {
    @extend .hd-2;
  }

  .accomplishment-recipient {
    @extend %rendering-accomplishment-line;
  }

  .accomplishment-summary {
    @extend %rendering-accomplishment-line;

    margin-bottom: spacing-vertical(mid-small);
  }

  .accomplishment-course {
    @extend %rendering-accomplishment-line;
  }

  .accomplishment-course-org {
  }

  .accomplishment-course-name {
  }

  .accomplishment-course-description {
    @extend %rendering-accomplishment-line;
  }

  .accomplishment-statement-detail {
    @extend %rendering-accomplishment-line;
  }

  // organizations
  .accomplishment-orgs {
    margin-bottom: spacing-vertical(base);

    .list-orgs {
      @extend %list-unstyled;
    }
  }

  .accomplishment-orgs-title {
    @extend %rendering-hd-section;
  }

  // signatories
  .accomplishment-signatories {
    @extend %rendering-section;

    .list-signatories {
      @extend %list-unstyled;
    }

    .signatory-signature {
      display: block;
      margin: 0 auto spacing-vertical(x-small) auto;
    }

    .signatory-name, .signatory-credentials {
      @include text-align(center);
    }

    .signatory-name {
      margin-bottom: spacing-vertical(xx-small);
    }

    .signatory-credentials {
      .role, .organization {
        white-space: pre-line;
        display: block;
      }
    }
  }

  .accomplishment-signatories-title {
    @extend %rendering-hd-section;
  }
}

// metadata
.accomplishment-metadata {
  margin-bottom: spacing-vertical(base);

  .metadata {
    @extend %list-unstyled;

    .label {
      @extend %copy-meta;

      margin-bottom: spacing-vertical(xx-small);
    }

    .label-explanation {
      display: block;
      font-weight: font-weight(normal);
      margin-top: spacing-vertical(xx-small);
    }

    .value {
      @extend %copy-base;

      font-weight: font-weight(semi-bold);
      color: palette(grayscale, dark);
    }
  }

  .recipient-img, .recipient-details {
    display: inline-block;
    vertical-align: middle;
  }

  .recipient-img {
    @extend %img-cropped;

    width: rem(100);

    @include margin-right(spacing-horizontal(small));

    .src {
      max-height: 100%;
      border: rem(4) solid $white;
    }
  }

  .recipient-details {
    @extend %copy-base;

    font-weight: font-weight(semi-bold);
    max-width: calc(100% - (#{rem(100)} + #{spacing-horizontal(small)} + 5px));
  }

  .recipient-name {
    margin-bottom: spacing-vertical(xx-small);
  }

  .recipient-username {
    margin-bottom: 0;
  }

  .accomplishment-id .value {
    word-wrap: break-word;
  }
}

.accomplishment-metadata-title {
  @extend %hd-subsection;

  border-bottom-color: palette(grayscale, back);
}

// ------------------------------
// #ACCOMPLISHMENT RELATED
// ------------------------------
.accomplishment-related {

}

.accomplishment-related-title {
  @extend %hd-subsection;
}

// ------------------------------
// #CERTIFICATE
// ------------------------------
// certficate - default
.certificate {
  .accomplishment-rendering {

    // decorative corners for certs
    .deco-corner {
      position: absolute;
    }

    .deco-corner-tl {
      @include triangle(20px, $cert-base-color, up-right);

      top: 0;
      right: 0;
    }

    .deco-corner-tr {
      @include triangle(20px, $cert-base-color, up-left);

      top: 0;
      left: 0;
    }

    .deco-corner-bl {
      @include triangle(20px, $cert-base-color, down-right);

      bottom: 0;
      right: 0;
    }

    .deco-corner-br {
      @include triangle(20px, $cert-base-color, down-left);

      bottom: 0;
      left: 0;
    }

    .accomplishment-type-label {
      color: $cert-base-color;
    }

    .accomplishment-signatories-title, .accomplishment-orgs-title {
      color: $cert-decorative-color;
    }

    // statement
    .accomplishment-statement,
    .accomplishment-statement-lead,
    .accomplishment-recipient,
    .accomplishment-course,
         {
      font-family: $font-family-serif;
    }

    .accomplishment-recipient,
    .accomplishment-course {
      letter-spacing: rem(1);
    }
  }
}

// certificate - base + honor
.layout-accomplishment.certificate-honor {
  .introduction {
    margin-bottom: 0;
  }

  .accomplishment-main {
    background: palette(grayscale, x-back);
  }

  .accomplishment-rendering {
    .accomplishment-type {
      margin-top: 0;
    }

    // hide the fancy
    .accomplishment-signatories .signatory-signature,
    .accomplishment-type-symbol {
      display: none;
    }
  }
}

// certificate - distinguished + verified
.layout-accomplishment.certificate-verified {
  .introduction {
    margin-bottom: spacing-vertical(base);
  }

  .accomplishment-main {
    background: palette(primary, back);
  }

  .accomplishment-rendering {
    background: $white url('../images/bg-verified.png') center no-repeat;
    background-size: 65%;

    .deco-corner-tl {
      @include triangle(20px, $cert-distinguished-color, up-right);
    }

    .deco-corner-tr {
      @include triangle(20px, $cert-distinguished-color, up-left);
    }

    .deco-corner-bl {
      @include triangle(20px, $cert-distinguished-color, down-right);

    }

    .deco-corner-br {
      @include triangle(20px, $cert-distinguished-color, down-left);
    }
  }

  .accomplishment-rendering {
    border-color: $cert-distinguished-color;

    .accomplishment-type-label {
      color: $cert-distinguished-color;
    }
  }
}

// ------------------------------
// #ABOUT
// ------------------------------
.about {

}

// ------------------------------
// #FOOTER
// ------------------------------
.footer-app {
  border-top: rem(4) solid palette(grayscale, x-back);
  padding-top: spacing-vertical(base);
}

.footer-app-nav {
  .list {
    @extend %list-unstyled;
  }
}

// ------------------------------
// #BADGES MODAL
// ------------------------------
.badges-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: z-index(front);
  background-color: transparentize(palette(grayscale, base), 0.5); /* dim the background */
  width: 100%;
  height: 100%;
  vertical-align: middle;

  .badges-modal {
    @extend %copy-large;

    box-sizing: content-box;
    position: fixed;
    top: spacing-vertical(large);
    right: 0;
    left: 0;
    z-index: z-index(very-front);
    max-width: 50%;
    margin-right: auto;
    margin-left: auto;
    border-top: rem(10) solid palette(primary, back);
    background: palette(grayscale, x-back);
    padding-right: spacing-horizontal(large);
    padding-left: spacing-horizontal(large);
    overflow-x: hidden;
    color: palette(grayscale, dark);

    .close {
      position: absolute;
      right: spacing-horizontal(mid-small);
      top: spacing-vertical(small);
      font-weight: font-weight(bold);
      cursor: pointer;
    }

    .badges-steps {
      display: table;
    }

    .image-container{
      // Lines the image up with the content of the above list.
      @include ltr {
        @include padding-left(2em);
      }

      @include rtl {
        @include padding-right(1em);

        float: right;
      }
    }

    .backpack-logo {
      @include float(right);
      @include margin-left(spacing-horizontal(small));
    }
  }
}

.modal-hr {
  display: block;
  border: none;
  background-color: palette(grayscale, back);
  height: rem(2);
  width: 100%;
}