@import '../../globals/vars';
@import '../../vendor/carbon-components/scss/globals/scss/layout';
@import '../../vendor/carbon-components/scss/globals/scss/helper-mixins';

$shadow-plus-padding: 1.4rem;
$shadow: 0.4rem;

.#{$iot-prefix}--flyout-menu {
  display: flex;

  &.#{$iot-prefix}--flyout-menu__top {
    flex-direction: column-reverse;
  }

  &.#{$iot-prefix}--flyout-menu__bottom {
    flex-direction: column;
  }

  &.#{$iot-prefix}--flyout-menu__right,
  [dir='rtl'] &.#{$iot-prefix}--flyout-menu__left {
    flex-direction: row;
  }

  &.#{$iot-prefix}--flyout-menu__left,
  [dir='rtl'] &.#{$iot-prefix}-flyout-menu__right {
    flex-direction: row-reverse;
  }

  &--body {
    color: initial;
    border-radius: 0;

    &:not(.#{$iot-prefix}--flyout-menu--body__light) {
      background: $ui-01;

      .#{$prefix}--tooltip__content::after {
        background-color: $ui-01;
      }
    }

    &.#{$iot-prefix}--flyout-menu--body__light {
      background: $ui-02;

      .#{$prefix}--tooltip__content::after {
        background-color: $ui-02;
      }
    }

    .#{$prefix}--tooltip__caret {
      display: none;
    }

    .#{$prefix}--tooltip__content {
      position: relative;
      max-width: 480px;
    }

    // Box shadow cover with all its various positons
    &.#{$iot-prefix}--flyout-menu--body__open .#{$prefix}--tooltip__content::after {
      content: '';
      position: absolute;
      top: -$shadow;
      left: 0;
    }

    &.#{$iot-prefix}--flyout-menu--body__bottom-end .#{$prefix}--tooltip__content::after {
      left: unset;
      right: 0;
    }

    &.#{$iot-prefix}--flyout-menu--body__top-start .#{$prefix}--tooltip__content::after {
      top: unset;
      bottom: -$shadow;
      left: 0;
    }

    &.#{$iot-prefix}--flyout-menu--body__top-end .#{$prefix}--tooltip__content::after {
      bottom: -$shadow;
      left: unset;
      right: 0;
      top: unset;
    }

    &.#{$iot-prefix}--flyout-menu--body__left-start .#{$prefix}--tooltip__content::after {
      left: unset;
      right: -$shadow;
      top: 0;
    }

    &.#{$iot-prefix}--flyout-menu--body__left-end .#{$prefix}--tooltip__content::after {
      display: none;
    }

    &.#{$iot-prefix}--flyout-menu--body__right-start .#{$prefix}--tooltip__content::after {
      top: 0;
      left: -$shadow;
    }

    &.#{$iot-prefix}--flyout-menu--body__right-end .#{$prefix}--tooltip__content::after {
      top: unset;
      bottom: 0;
      left: -$shadow;
    }

    &.#{$iot-prefix}--flyout-menu--body__bottom-start,
    &.#{$iot-prefix}--flyout-menu--body__bottom-end,
    &.#{$iot-prefix}--flyout-menu--body__top-start,
    &.#{$iot-prefix}--flyout-menu--body__top-end {
      .#{$prefix}--tooltip__content::after {
        width: 3rem;
        height: $shadow;
      }
    }

    &.#{$iot-prefix}--flyout-menu--body__bottom-start.#{$iot-prefix}--flyout-menu--body__field,
    &.#{$iot-prefix}--flyout-menu--body__bottom-end.#{$iot-prefix}--flyout-menu--body__field,
    &.#{$iot-prefix}--flyout-menu--body__top-start.#{$iot-prefix}--flyout-menu--body__field,
    &.#{$iot-prefix}--flyout-menu--body__top-end.#{$iot-prefix}--flyout-menu--body__field {
      .#{$prefix}--tooltip__content::after {
        width: 2.5rem;
      }
    }

    &.#{$iot-prefix}--flyout-menu--body__bottom-start.#{$iot-prefix}--flyout-menu--body__small,
    &.#{$iot-prefix}--flyout-menu--body__bottom-end.#{$iot-prefix}--flyout-menu--body__small,
    &.#{$iot-prefix}--flyout-menu--body__top-start.#{$iot-prefix}--flyout-menu--body__small,
    &.#{$iot-prefix}--flyout-menu--body__top-end.#{$iot-prefix}--flyout-menu--body__small {
      .#{$prefix}--tooltip__content::after {
        width: 2rem;
      }
    }

    &.#{$iot-prefix}--flyout-menu--body__left-start,
    &.#{$iot-prefix}--flyout-menu--body__left-end,
    &.#{$iot-prefix}--flyout-menu--body__right-start,
    &.#{$iot-prefix}--flyout-menu--body__right-end {
      .#{$prefix}--tooltip__content::after {
        width: $shadow;
        height: 3rem;
      }
    }

    &.#{$iot-prefix}--flyout-menu--body__left-start.#{$iot-prefix}--flyout-menu--body__field,
    &.#{$iot-prefix}--flyout-menu--body__left-end.#{$iot-prefix}--flyout-menu--body__field,
    &.#{$iot-prefix}--flyout-menu--body__right-start.#{$iot-prefix}--flyout-menu--body__field,
    &.#{$iot-prefix}--flyout-menu--body__right-end.#{$iot-prefix}--flyout-menu--body__field {
      .#{$prefix}--tooltip__content::after {
        height: 2.5rem;
      }
    }

    &.#{$iot-prefix}--flyout-menu--body__left-start.#{$iot-prefix}--flyout-menu--body__small,
    &.#{$iot-prefix}--flyout-menu--body__left-end.#{$iot-prefix}--flyout-menu--body__small,
    &.#{$iot-prefix}--flyout-menu--body__right-start.#{$iot-prefix}--flyout-menu--body__small,
    &.#{$iot-prefix}--flyout-menu--body__right-end.#{$iot-prefix}--flyout-menu--body__small {
      .#{$prefix}--tooltip__content::after {
        height: 2rem;
      }
    }
  }

  &__shadow-block {
    display: block;
    position: absolute;
    background: $ui-02;

    &.bottom-start {
      height: $shadow-plus-padding;
      top: -$shadow-plus-padding;
      left: 0;
    }

    &.bottom-end {
      height: $shadow-plus-padding;
      top: -$shadow-plus-padding;
      right: 0;
    }

    &.top-start {
      height: 0.375rem;
      bottom: -0.375rem;
      left: 0;
    }

    &.top-end {
      height: 0.375rem;
      bottom: -0.375rem;
      right: 0;
    }

    &.left-start {
      width: $shadow-plus-padding;
      right: -$shadow-plus-padding;
      top: 0;
    }

    &.left-end {
      width: $shadow-plus-padding;
      right: -$shadow-plus-padding;
      bottom: 0;
    }

    &.right-start {
      width: $shadow-plus-padding;
      left: -$shadow-plus-padding;
      top: 0;
    }

    &.right-end {
      width: $shadow-plus-padding;
      left: -$shadow-plus-padding;
      bottom: 0;
    }
  }

  &--tooltip-anchor {
    position: relative;
    height: 0px;
    width: 0px;
  }

  &__open {
    @include box-shadow;
  }

  &__bottom-container {
    min-width: 15.4rem;
    display: flex;

    > * {
      flex-grow: 1;
    }

    > button.#{$iot-prefix}--btn {
      padding-right: 60px;
    }
  }

  &__bottom-container-custom {
    min-height: 64px;
    width: 100%;
  }
}

.#{$iot-prefix}--flyout-menu--body.#{$prefix}--tooltip {
  min-width: unset;
  max-width: unset;
  padding: 0;
}

.#{$iot-prefix}--flyout-menu--content {
  padding: $spacing-05 $spacing-05 $spacing-09 $spacing-05;
}

.#{$iot-prefix}--flyout-menu--trigger-button {
  color: $icon-01;

  &.bx--btn.bx--btn--icon-only.bx--tooltip__trigger svg,
  &.bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover svg {
    fill: $gray-70;
  }

  .#{$iot-prefix}--flyout-menu:not(.#{$iot-prefix}--flyout-menu__light) & {
    background-color: $ui-01;
  }

  .#{$iot-prefix}--flyout-menu:not(.#{$iot-prefix}--flyout-menu__open) &:hover {
    background-color: $hover-ui;
  }

  .#{$iot-prefix}--flyout-menu__light.#{$iot-prefix}--flyout-menu__open &:hover {
    background-color: $ui-02;
  }

  &:focus {
    box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $ui-background;
  }

  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger::before {
    width: 100%;
  }

  > svg {
    margin-left: 0;
  }

  // What are we doing with these tool tips for buttons. We will want to be consistent across all button types.
  .#{$prefix}--assistive-text,
  &.#{$prefix}--tooltip--a11y::before {
    visibility: var(--tooltip-visibility);
  }
}