@import '../variables/default.scss';
@import '../mixins/index.scss';

@function gen_arrow_shadow($xSign, $ySign) {
  @return $xSign * 1px * $hd $ySign * 1px * $hd 4px * $hd rgba(0, 0, 0, 0.1);
}

.at-tips {
  position: relative;
  display: inline-block;

  &-overlay {
    position: absolute;
    z-index: $zindex-dropdown;
    white-space: normal;
    word-break: break-all;

    &-hidden {
      display: none;
    }

    // top
    &.placement-bc-tc {
      left: 50%;
      bottom: 100%;
      padding-bottom: $at-tips-overlay-padding;
      transform: translate(-50%, 0);

      & .at-tips-arrow {
        top: 100%;
        margin-top: -$at-tips-overlay-padding;
        left: 50%;
        transform: translate(-50%, -1%);
      }
    }

    // bottom
    &.placement-tc-bc {
      left: 50%;
      top: 100%;
      padding-top: $at-tips-overlay-padding;
      transform: translate(-50%, 0);

      & .at-tips-arrow {
        left: 50%;
        transform: translate(-50%, -99%) rotate(180deg);
      }
    }

    // topLeft
    &.placement-bl-tl {
      left: 0;
      bottom: 100%;
      padding-bottom: $at-tips-overlay-padding;

      & .at-tips-arrow {
        top: 100%;
        margin-top: -$at-tips-overlay-padding;
        left: $spacing-h-xl;
        transform: translateY(-1%);
      }
    }

    // topRight
    &.placement-br-tr {
      right: 0;
      bottom: 100%;
      padding-bottom: $at-tips-overlay-padding;

      & .at-tips-arrow {
        top: 100%;
        margin-top: -$at-tips-overlay-padding;
        right: $spacing-h-xl;
        transform: translateY(-1%);
      }
    }

    // bottomRight
    &.placement-tr-br {
      right: 0;
      top: 100%;
      padding-top: $at-tips-overlay-padding;

      & .at-tips-arrow {
        right: $spacing-h-xl;
        transform: rotate(180deg) translateY(100%);
      }
    }

    // bottomLeft
    &.placement-tl-bl {
      left: 0;
      top: 100%;
      padding-top: $at-tips-overlay-padding;

      & .at-tips-arrow {
        left: $spacing-h-xl;
        transform: rotate(180deg) translateY(99%);
      }
    }
  }

  &-inner {
    font-size: $at-tips-font-size;
    color: $at-tips-text-color;
    background-color: $at-tips-bg;
    border-radius: $border-radius-lg;
    box-shadow: 0 4px 10px 0 rgba(51, 51, 51, 0.2);
    overflow: hidden;
    display: flex;
    position: relative;
    align-items: flex-start;
    padding: 8px * $hd 12px * $hd;
    box-sizing: border-box;
    max-width: 90vw;
    width: max-content;

    &-content {
      flex: 1;
      text-align: left;
    }

    .at-tips-close {
      margin-left: 12px;
      align-self: flex-start;

      .close-icon {
        color: $at-tips-close-color;
      }
    }
  }

  &-arrow {
    position: absolute;
    width: $at-tips-arrow-width;
    height: $at-tips-arrow-height;
    z-index: 0;
    box-sizing: border-box;
    background-position: center center;
    background-size: 100% 100%;
    transform-origin: center center;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2030%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.746394159%22%3E%3Cpath%20d%3D%22M0%2C0%20L30%2C0%20L18.0728851%2C14.3125379%20C16.6586288%2C16.0096454%2014.13637%2C16.2389417%2012.4392624%2C14.8246854%20C12.2534101%2C14.6698085%2012.0819918%2C14.4983901%2011.9271149%2C14.3125379%20L0%2C0%20L0%2C0%20Z%22%20id%3D%22Rectangle-15%22%20fill%3D%22'+$at-tips-arrow-color+'%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  }
}