@import '../_mixins.scss';
@import '../_vars.scss';

$color: var(--ui-01);
$transparent-light: rgba(0, 8, 16, 0.08);
$transparent-dark: rgba(0, 8, 16, 0.15);
$transparent-darker: rgba(0, 8, 16, 0.2);

.#{$namespace-prefix}-tooltip.light-border-theme {
  background-color: $color;
  background-clip: padding-box;
  border: 1px solid $transparent-dark;
  color: #26323d;
  box-shadow: 0 4px 14px -2px $transparent-light;

  > .#{$namespace-prefix}-backdrop {
    background-color: $color;
  }

  > .#{$namespace-prefix}-arrow,
  > .#{$namespace-prefix}-svg-arrow {
    &::after,
    &::before {
      content: '';
      position: absolute;
      z-index: -1;
    }
  }

  > .#{$namespace-prefix}-svg-arrow {
    fill: $color;

    &::after {
      background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNDE0MjEiIHZpZXdCb3g9IjAgMCAxOCA3IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0wIDdzMi4wMjEtLjAxNSA1LjI1My00LjIxOGMxLjMzMS0xLjczMSAyLjU0NC0yLjc3NSAzLjc0Ny0yLjc4MiAxLjIwMy0uMDA3IDIuNDE2IDEuMDM1IDMuNzYxIDIuNzgyIDMuMjUxIDQuMjIzIDUuMjM5IDQuMjE4IDUuMjM5IDQuMjE4eiIgZmlsbD0iIzMzMyIgZmlsbC1vcGFjaXR5PSIuMjM1Mjk0IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=);
      background-size: 18px $arrow-size;
      width: 18px;
      height: $arrow-size;
      left: 0;
      top: 0;
      fill: $transparent-dark;
    }
  }

  &[data-placement^='top'] {
    > .#{$namespace-prefix}-svg-arrow::after {
      top: 1px;
      transform: rotate(180deg);
    }

    > .#{$namespace-prefix}-arrow {
      border-top-color: $color;

      &::after {
        border-top: $arrow-size solid $color;
        top: -$arrow-size;
      }
      &::before {
        border-top: $arrow-size solid $transparent-darker;
        bottom: -1px;
      }
    }
  }

  &[data-placement^='bottom'] {
    > .#{$namespace-prefix}-svg-arrow::after {
      top: -1px;
    }

    > .#{$namespace-prefix}-arrow {
      border-bottom-color: $color;

      &::after {
        border-bottom: $arrow-size solid $color;
        bottom: -$arrow-size;
      }
      &::before {
        border-bottom: $arrow-size solid $transparent-darker;
        bottom: -($arrow-size - 1);
      }
    }
  }

  &[data-placement^='left'] {
    > .#{$namespace-prefix}-svg-arrow::after {
      left: 1px;
      top: 0;
      transform: rotate(90deg);
    }

    > .#{$namespace-prefix}-arrow {
      border-left-color: var(--ui-01);

      &::after {
        border-left: $arrow-size solid $color;
        left: -$arrow-size;
      }
      &::before {
        border-left: $arrow-size solid $transparent-darker;
        left: -($arrow-size - 1);
      }
    }
  }

  &[data-placement^='right'] {
    > .#{$namespace-prefix}-svg-arrow::after {
      left: -1px;
      top: 0;
      transform: rotate(-90deg);
    }

    > .#{$namespace-prefix}-arrow {
      border-right-color: var(--ui-01);

      &::after {
        border-right: $arrow-size solid $color;
        right: -$arrow-size;
      }
      &::before {
        border-right: $arrow-size solid $transparent-darker;
        right: -($arrow-size - 1);
      }
    }
  }

  &[data-placement^='top'],
  &[data-placement^='bottom'] {
    > .#{$namespace-prefix}-arrow,
    > .#{$namespace-prefix}-svg-arrow {
      transform: translateX(-1px);
    }

    > .#{$namespace-prefix}-arrow {
      &::after,
      &::before {
        left: -$arrow-size;
        border-left: $arrow-size solid transparent;
        border-right: $arrow-size solid transparent;
      }
    }
  }

  &[data-placement^='left'],
  &[data-placement^='right'] {
    > .#{$namespace-prefix}-arrow,
    > .#{$namespace-prefix}-svg-arrow {
      transform: translateY(-1px);
    }

    > .#{$namespace-prefix}-arrow {
      &::after,
      &::before {
        top: -$arrow-size;
        border-top: $arrow-size solid transparent;
        border-bottom: $arrow-size solid transparent;
      }
    }
  }
}