//
// Copyright IBM Corp. 2019, 2022
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

$css--plex: true !default;
// `@include reset` with `variable-exists(css--reset) == false or $css--reset == false` breaks the dotted underline
// TODO: Determine how to deal with `$css--reset` across components
$css--reset: true !default;
// Caret's original size was 13.75px square
$caret-size: 6.875px;

@import 'carbon-components/scss/globals/scss/css--helpers';
@import 'carbon-components/scss/globals/scss/layout';
@import 'carbon-components/scss/components/tooltip/tooltip';

:host(#{$prefix}-tooltip) {
  @extend .#{$prefix}--tooltip__trigger;
}

:host(#{$prefix}-tooltip-body) {
  @extend .#{$prefix}--tooltip;

  ::slotted(#{$prefix}-tooltip-footer) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
  }

  ::slotted(p) {
    @include type-style('body-short-01');
    text-align: left;
  }
}

:host(#{$prefix}-tooltip-body[direction='top']) {
  margin-top: 0;
  margin-bottom: $spacing-03;

  .#{$prefix}--tooltip__caret {
    top: auto;
    bottom: rem(-6px);
    transform: rotate(180deg);
  }
}

:host(#{$prefix}-tooltip-body[direction='right']) {
  margin-left: $spacing-03;

  .#{$prefix}--tooltip__caret {
    top: 50%;
    right: auto;
    left: calc(#{$caret-size * (-1)} + 1px);
    transform: rotate(270deg) translate(25%, -50%); // Adjust for change in Y position as caret rotates
  }
}

:host(#{$prefix}-tooltip-body[direction='bottom']) {
  margin-top: $spacing-03;
}

:host(#{$prefix}-tooltip-body[direction='left']) {
  margin-top: 0;
  margin-right: $spacing-03;

  .#{$prefix}--tooltip__caret {
    top: 50%;
    right: calc(#{$caret-size * (-1)} + 1px);
    left: auto;
    transform: rotate(90deg) translate(-25%, -50%); // Adjust for change in Y position as caret rotates
  }
}

:host(#{$prefix}-tooltip-body[open]) {
  @extend .#{$prefix}--tooltip--shown;
}

:host(#{$prefix}-tooltip-definition) {
  @extend .#{$prefix}--tooltip--definition;
  @extend .#{$prefix}--tooltip--a11y;

  outline: none;
}

:host(#{$prefix}-tooltip-icon) {
  outline: none;

  .#{$prefix}--tooltip__trigger:focus ::slotted(svg) {
    outline: 1px solid $focus;
  }
}