/*
 * Badges tool styles.
 */

@use "sass:math";

// Claroline & bootstrap mixins
@import "src/main/app/Resources/styles/mixins";

// Plugin vars
@import "../variables";


.badge-card {
  .data-card-header {
    min-width: 0 !important;
  }

  .data-card-content {
    max-width: none !important;
  }

  .data-card-icon {
    background: none;
    border-radius: 0;
  }
}

// TODO : to remove
.badge-meta {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-top: $component-margin-bottom;
  background: #3d3d3d;
  margin-bottom: $component-margin-bottom;

  @include box-shadow(inset 0 0 60px 15px rgba(0, 0, 0, 0.25));

  .nav-tabs {
    width: 100%;
    display: flex;
    padding-left: ($grid-gutter-width * .5);
    padding-right: ($grid-gutter-width * .5);

    > li > a,
    > li > button,
    > li > .dropdown > button {
      color: #fdfdfd;

      &:hover,
      &:focus {
        color: $body-color !important;
      }
    }

    > li.active > a,
    > li.active > a:focus,
    > li.active > a:hover,
    > li.active > button,
    > li.active > button:focus,
    > li.active > button:hover,
    .open > button {
      color: $body-color !important;
      background: $body-bg;
    }

    .nav-actions {
      margin-left: auto;

      .dropdown > a,
      .dropdown > button {
        margin-right: 0;
      }
    }
  }

  + .data-list {
    margin-top: 0;
  }
}

.badge-image {
  flex-shrink: 0;
  margin: 0 ($grid-gutter-width * .5);
  margin-bottom: $component-margin-bottom;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;

  > div {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    height: 100%;
    width: 100%;

    border-radius: 50%;
  }

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

  .fa {
    font-size: 72px;
  }
}

.badge-user {
  width: 200px;
  min-height: 200px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: $panel-body-padding;
  margin: 0 ($grid-gutter-width * .5);
  margin-bottom: $component-margin-bottom;

  .badge-certificate {
    position: relative;
    width: 104px;
    height: 104px;

    .fa {
      position: absolute;
      left: 0;
      top: 0;
      width: 104px;
      height: 104px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .fa-certificate {
      font-size: 104px;
    }
  }

  &.badge-granted {
    background: #2d2d2d;

    .fa-certificate {
      color: $brand-success;
    }

    .fa-check {
      font-size: 40px;
      color: #2d2d2d;
    }

    .h3,
    .h3 small {
      color: white;
    }
  }

  &.badge-not-granted {
    color: #888888;
    border: 2px dashed #888888;

    .fa-certificate {
      color: #888888;
    }

    .fa-times {
      font-size: 40px;
      color: #3d3d3d;
    }

    .h3,
    .h3 small {
      color: #888888;
    }
  }

  .user-avatar { // todo : to remove
    // for picture
    max-height: 80px;

    // for .fa when no picture
    font-size: 80px;
  }

  .h3 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0;
    font-weight: 900;

    small {
      line-height: $headings-line-height;
      margin-top: 5px;
      display: block;
    }
  }
}

// TODO : to remove
.badge-info {
  flex: 1;
  color: white;
  margin: $component-margin-bottom ($grid-gutter-width * .5);

  h1 {
    font-weight: 900;
    margin-top: 0;
  }

  .content-html {
    font-style: italic;
  }
}
