@import '../src/ui-guide-variables';

$theme-color: #366 !default;
$popup-arrow-size: 8px;
$box-gutter-size: 8px !default;
$box-border-size: 3px !default;

[uig-highlight-box] {
  box-sizing: content-box !important;
  border: $box-border-size solid darken($theme-color, 5%);
  border-radius: 0.25rem;
  box-shadow: 0 0 0 999rem darken(rgba($theme-color, 0.15), 10%),
    0 0 0.25rem rgba($theme-color, 0.3);
  opacity: 0;
  will-change: padding, margin, opacity;

  &[uig-show] {
    animation: shrink 0.3s 0.2s forwards;

    @keyframes shrink {
      from {
        opacity: 0;
        padding: $box-gutter-size + 30px;
        margin: -$box-gutter-size - $box-border-size - 30px;
      }

      to {
        opacity: 1;
        padding: $box-gutter-size;
        margin: -$box-gutter-size - $box-border-size;
      }
    }
  }
}

[uig-popup-wrapper] {
  position: relative;
  display: flex;
  max-width: 450px;
  opacity: 0;
  will-change: opacity, transform;

  [uig-popup][uig-show][x-placement='top'] & {
    animation: slide-top 0.2s 0.3s ease-out forwards;

    @keyframes slide-top {
      from {
        transform: translateY(30px);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
  }

  [uig-popup][uig-show][x-placement='right'] & {
    animation: slide-right 0.2s 0.3s ease-out forwards;

    @keyframes slide-right {
      from {
        transform: translateX(-30px);
        opacity: 0;
      }

      to {
        transform: translateX(0);
        opacity: 1;
      }
    }
  }

  [uig-popup][uig-show][x-placement='bottom'] & {
    animation: slide-bottom 0.2s 0.3s ease-out forwards;

    @keyframes slide-bottom {
      from {
        transform: translateY(-30px);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
  }

  [uig-popup][uig-show][x-placement='left'] & {
    animation: slide-left 0.2s 0.3s ease-out forwards;

    @keyframes slide-left {
      from {
        transform: translateX(30px);
        opacity: 0;
      }

      to {
        transform: translateX(0);
        opacity: 1;
      }
    }
  }
}

span[x-arrow] {
  position: absolute;
  z-index: 2;
  display: inline-block;
  border: $popup-arrow-size solid transparent;

  [uig-popup][x-placement='bottom'] & {
    top: $box-gutter-size + $box-border-size;
    border-bottom-color: darken($theme-color, 5%);
  }

  [uig-popup][x-placement='top'] & {
    bottom: $box-gutter-size + $box-border-size;
    border-top-color: darken($theme-color, 5%);
  }

  [uig-popup][x-placement='right'] & {
    left: $box-gutter-size + $box-border-size;
    border-right-color: darken($theme-color, 5%);
  }

  [uig-popup][x-placement='left'] & {
    right: $box-gutter-size + $box-border-size;
    border-left-color: darken($theme-color, 5%);
  }
}

[uig-popup-card] {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  background-color: $theme-color;
  color: #fff;
  border-radius: 0.2rem;
  overflow: hidden;

  [uig-popup][x-placement='bottom'] & {
    margin-top: ($popup-arrow-size * 2) + $box-gutter-size + $box-border-size;
  }

  [uig-popup][x-placement='top'] & {
    margin-bottom: ($popup-arrow-size * 2) + $box-gutter-size + $box-border-size;
  }

  [uig-popup][x-placement='right'] & {
    margin-left: ($popup-arrow-size * 2) + $box-gutter-size + $box-border-size;
  }

  [uig-popup][x-placement='left'] & {
    margin-right: ($popup-arrow-size * 2) + $box-gutter-size + $box-border-size;
  }
}