@use "00-base/configure" as *;

@use "sass:color" as *;

.ma__tooltip {

  &__inner {
    display: inline-block;
    position: relative;
  }

  &__open {
    border-bottom-style: dotted;
    border-bottom-width: 2px;
    cursor: pointer;
    font-size: $fonts-xsmall;
    transition: border ease .4s;

    & > svg {
      margin-bottom: -.2em;
      width: 16px;
      height: 16px;
    }
  }

  &__control {

    @include ma-visually-hidden;
  }

  &__modal {
    margin-top: 10px;
    max-width: 280px;
    position: absolute;
      top: 100%;
      left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: $z-modal;

    &--below {

      &:before {
        border-style: solid;
        border-width: 10px;
        border-top: none;
        content: "";
        height: 0;
        position: absolute;
          bottom: 100%;
          left: 50%;
        transform: translateX(-50%);
        width: 0;
      }
    }
  }

  &__control:not(:focus) ~ &__modal {

    @include ma-visually-hidden;
  }

  &__container {
    box-shadow: 2px 2px 4px  rgba(1, 1, 1, 0.1),-2px 2px 4px  rgba(1, 1, 1, 0.1);
    position: absolute;
      left: 0;
      top: 0;
    width: 280px;
  }

  &__close {
    border: 2px solid;
    display: block;
    font-size: $fonts-xsmall;
    letter-spacing: $letter-spacing-small;
    line-height: 1.2rem;
    margin: 0;
    padding: 8px;
    text-align: right;
    text-transform: uppercase;
    width: 100%;

    &:after {
      content: "+";
      display: inline-block;
      font-size: 2.5em;
      line-height: 1.2rem;
      margin-left: .2rem;
      transform: rotate(45deg);
      vertical-align: top;
    }
  }

  &__title {

    @include ma-h6;
    margin: 15px 20px 0;
  }

  &__message {
    font-size: $fonts-smaller;
    margin: 15px 20px 15px;

  }
}

//theme

.ma__tooltip {

  &__open {
    border-color: transparent;
    font-weight: bold;

    &:hover {
      border-color: rgba($c-font-link, .5) !important;  // specificity war with &__control:not(:focus)
    }

    & > svg {
      fill: mix(#fff, $c-font-link, 50%);  
    }
  }

  &__control:focus ~ &__open,
  &__control:checked + &__open {
    border-color: rgba($c-font-link, .5);
  }

  &__control:not(:focus) ~ &__open {
    border-color: transparent;
  }

  &__modal {

    &--below {

      &:before {
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: $c-primary;
      }
    }
  }

  &__container {
    background-color: $c-bg-section;
  }

  &__close {
    background-color: $c-primary;
    border-color: transparent;
    color: $c-font-inverse;
    font-weight: bold;

    &:after {
      font-weight: $fonts-normal;
    }
  }

  &__control:focus ~ &__modal &__close {
    border-color: Highlight !important;

    /* WebKit gets its native focus styles.
     */

    @media (-webkit-min-device-pixel-ratio:0) {
      outline-color: -webkit-focus-ring-color;
    }
  }
}