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

$color: white;
$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}-box[data-theme~='light-border'] {
  background-color: $color;
  background-clip: padding-box;
  border: 1px solid $transparent-dark;
  color: #333;
  box-shadow: 0 4px 14px -2px $transparent-light;

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

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

  > .#{$namespace-prefix}-arrow::after {
    border-color: transparent;
    border-style: solid;
  }

  &[data-placement^='top'] {
    > .#{$namespace-prefix}-arrow {
      &::before {
        border-top-color: $color;
      }

      &::after {
        border-top-color: $transparent-darker;
        border-width: 7px 7px 0;
        top: $arrow-size + 1;
        left: 1px;
      }
    }

    > .#{$namespace-prefix}-svg-arrow {
      > svg {
        top: $arrow-size;
      }

      &::after {
        top: $arrow-size + 1;
      }
    }
  }

  &[data-placement^='bottom'] {
    > .#{$namespace-prefix}-arrow {
      &::before {
        border-bottom-color: $color;
        bottom: $arrow-size;
      }

      &::after {
        border-bottom-color: $transparent-darker;
        border-width: 0 7px 7px;
        bottom: $arrow-size + 1;
        left: 1px;
      }
    }

    > .#{$namespace-prefix}-svg-arrow {
      > svg {
        bottom: $arrow-size;
      }

      &::after {
        bottom: $arrow-size + 1;
      }
    }
  }

  &[data-placement^='left'] {
    > .#{$namespace-prefix}-arrow {
      &::before {
        border-left-color: $color;
      }

      &::after {
        border-left-color: $transparent-darker;
        border-width: 7px 0 7px 7px;
        left: $arrow-size + 1;
        top: 1px;
      }
    }

    > .#{$namespace-prefix}-svg-arrow {
      > svg {
        left: 11px;
      }

      &::after {
        left: 12px;
      }
    }
  }

  &[data-placement^='right'] {
    > .#{$namespace-prefix}-arrow {
      &::before {
        border-right-color: $color;
        right: $arrow-size;
      }

      &::after {
        border-width: 7px 7px 7px 0;
        right: $arrow-size + 1;
        top: 1px;
        border-right-color: $transparent-darker;
      }
    }

    > .#{$namespace-prefix}-svg-arrow {
      > svg {
        right: 11px;
      }

      &::after {
        right: 12px;
      }
    }
  }

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

    &::after {
      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCA2czEuNzk2LS4wMTMgNC42Ny0zLjYxNUM1Ljg1MS45IDYuOTMuMDA2IDggMGMxLjA3LS4wMDYgMi4xNDguODg3IDMuMzQzIDIuMzg1QzE0LjIzMyA2LjAwNSAxNiA2IDE2IDZIMHoiIGZpbGw9InJnYmEoMCwgOCwgMTYsIDAuMikiIC8+PC9zdmc+);
      background-size: $arrow-size 6px;
      width: $arrow-size;
      height: 6px;
    }
  }
}