/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */

.tooltip {
  color: $primary;
  font-weight: bold;
  position: relative;
  cursor: pointer;

  &.error {
    color: $red;

    &:hover,
    &:focus {
     color: $red-sh;
    }

    .tooltip-content {
      background-color: #FEF1F3;
      box-shadow:
        0 34.6px 4.3px -51px rgba(254, 241, 243, 0.07),
        0 41px 8.3px -51px rgba(254, 241, 243, 0.095),
        0 42.3px 12.6px -51px rgba(254, 241, 243, 0.116),
        0 42.3px 18.1px -51px rgba(254, 241, 243, 0.142),
        0 43.9px 27px -51px rgba(254, 241, 243, 0.183),
        0 60px 50px -51px rgba(254, 241, 243, 0.26)
      ;
      &::before {
        border-left: 2rem solid #fef1f3;
      }

      .term.error {
        text-align: center;

        .name-cat {
          .icon {
            display: inline-block;
            margin-right: 0.75rem;
            color: $red-hl;
            position: relative;
            transform: translateY(0.1rem);
            margin-left: -2rem;
          }

          .name {
            font-size: 2.4rem;
          }
        }

        .description {
          max-width: 30ch;
          margin: 0 auto;
        }

        small {
          display: inline-block;
          margin-top: 1rem;
          font-size: 1.4rem;
        }
      }
    }
  }

  &::after {
    display: inline-block;
    margin-left: 0.5rem;
    position: relative;
    transform: translateY(0.1rem);
  }

  .tooltip-content {
    display: block;
    position: absolute;
    z-index: 9990;
    padding: 1rem;
    width: 100%;
    min-width: 25rem;
    min-height: 15rem;
    max-height: 50rem;
    top: calc(100% + 1rem);
    left: 0;
    background-color: $primary-hl9;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10%);
    transition: 0.2s ease all;
    border-radius: 0.8rem;
    box-shadow:
      0 34.6px 4.3px -51px rgba(0, 111, 182, 0.07),
      0 41px 8.3px -51px rgba(0, 111, 182, 0.095),
      0 42.3px 12.6px -51px rgba(0, 111, 182, 0.116),
      0 42.3px 18.1px -51px rgba(0, 111, 182, 0.142),
      0 43.9px 27px -51px rgba(0, 111, 182, 0.183),
      0 60px 50px -51px rgba(0, 111, 182, 0.26)
    ;
    
    @media only screen and (min-width:35em) {
      padding: 3rem 3rem 4rem;
      min-width: 40rem;
      min-height: 15rem;
      max-height: 40rem;
      top: calc(100% + 2rem);
      left: calc(50% - 2rem);
    }

    .term {
      &:not(:first-child){
        border-top: 1px solid $primary-hl5;
        margin-top: 2rem;
        padding-top: 2rem;
      }
    }

    .name-cat {
      display: inline-block;
      margin-bottom: 1rem;
      line-height: 1.1;

      .name {
        font-weight: bold;
      }

      .category {
        display: block;
        font-size: 1.4rem;
        font-weight: normal;

        @media only screen and (min-width:35em) {
          display: inline-block;
          font-size: inherit;

          &::before {
            content: '•';
            display: inline-block;
            margin: 0 0.5rem;
          }
        }
      }
    }

    .description {
      font-size: 1.3rem;
      font-weight: normal;
      color: $black; 

      @media only screen and (min-width:35em) {
        font-size: 1.6rem;
      }
    }

    &::before {
      $point-size: 1rem;
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      transform: translateY(-50%);
      pointer-events: none;
      border-left: $point-size solid $primary-hl9;
      border-right: $point-size solid transparent;
      border-top: $point-size solid transparent;
      border-bottom: $point-size solid transparent;

      @media only screen and (min-width:35em) {
        $point-size: 2rem;
      }
    }

    &:hover,
    &:focus {
      opacity: 1;
      pointer-events: all;
      transform: translateY(0);
    }
  }

  &:hover,
  &:focus {
    color: $primary-sh;
    
    .tooltip-content {
      opacity: 1;
      pointer-events: all;
      transform: translateY(0);
    }
  }

  &.is-loading .tooltip-content {
    display: flex;
    justify-content: center;
    align-items: center;
  
    &::after {
      content: "";
      animation: spinAround 500ms infinite linear;
      border: 2px solid $primary;
      border-radius: 290486px;
      border-right-color: transparent;
      border-top-color: transparent;
      display: block;
      height: 1em;
      position: relative;
      width: 1em;
    }
  }

  &.error.is-loading .tooltip-content::after {
    border-color: $red;
  }
}

@keyframes spinAround {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}