// Tooltip

//
// Variables
//

@import "../variables";


//
// Base styles
//

joomla-tip {
  position: relative;
  display: inline-block;

  button {
    width: 1.6rem;
    height: 1.6rem;
    font-family: serif;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.4rem;
    color: #fff;
    background: #1c3d5c;
    border: 0;
    border-radius: 50%;
  }

  .toggletip-bubble {
    position: absolute;
    z-index: 1040;
    display: inline-block;
    width: 14rem;
    padding: .5rem .8rem;
    font-size: .9rem;
    line-height: 1.2rem;
    color: #fff;
    background: #222;
    border-radius: .25rem;
    box-shadow: 0 0 5px rgba(0,0,0,.4);
    transition: all ease-in;
    animation-duration: .3s;

    &::after {
      position: absolute;
      top: .6rem;
      right: 100%;
      width: 0;
      height: 0;
      content: "";
      border-style: solid;
    }

    &.top {
      bottom: 100%;
      left: 50%;
      margin-bottom: .6rem;
      transform: translate(-50%, 0);
      animation-name: toggletip-fadeInTop;

      &::after {
        top: 100%;
        bottom: auto;
        left: 50%;
        border-color: #222 transparent transparent;
        border-width: 6px 6px 0;
        transform: translateX(-50%);
      }

    }

    &.left {
      top: 50%;
      right: 100%;
      margin-right: .6rem;
      transform: translate(0, -50%);
      animation-name: toggletip-fadeInLeft;

      &::after {
        top: 50%;
        bottom: auto;
        left: 100%;
        border-color: transparent transparent transparent #222;
        border-width: 6px 0 6px 6px;
        transform: translateY(-50%);
      }

    }

    &.right {
      top: 50%;
      left: 100%;
      margin-left: .6rem;
      transform: translate(0, -50%);
      animation-name: toggletip-fadeInRight;

      &::after {
        top: 50%;
        right: 100%;
        bottom: auto;
        border-color: transparent #222 transparent transparent;
        border-width: 6px 6px 6px 0;
        transform: translateY(-50%);
      }

    }

    &.bottom {
      top: 100%;
      left: 50%;
      margin-top: .6rem;
      transform: translate(-50%, 0);
      animation-name: toggletip-fadeInBottom;

      &::after {
        top: -6px;
        left: 50%;
        border-color: transparent transparent #222;
        border-width: 0 6px 6px;
        transform: translateX(-50%);
      }

    }

  }

}

@keyframes toggletip-fadeInRight {
  from {
    opacity: 0;
    transform: translate(-10px, -50%);
  }
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
@keyframes toggletip-fadeInLeft {
  from {
    opacity: 0;
    transform: translate(10px, -50%);
  }
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
@keyframes toggletip-fadeInTop {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@keyframes toggletip-fadeInBottom {
  from {
    opacity: 0;
    transform: translate(-50%, -10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}