@import '../../scss/settings/colours';
@import '../../scss/utility/responsive';

$bubble-trigger-size: 24px;

$bubble-offset: 7px;

$bubble-triangle-height: 10px;
$bubble-triangle-width: 7px;
$bubble-triangle-position: $bubble-triangle-width + 5px;

.bubble {
  composes: rounded from '../Borders.modules.scss';

  position: absolute;
  bottom: calc(100% + #{$bubble-triangle-height});

  background-color: $color-white;
  box-shadow: 0 0 2px 0 $color-shark, 0 3px 2px 0 rgba(84, 89, 95, 0.25);

  // This is the bubble triangle
  &::before {
    display: block;
    position: absolute;
    content: '';

    bottom: $bubble-triangle-width * -1;

    border-width: $bubble-triangle-width;
    border-style: solid;
    border-color: transparent $color-white $color-white transparent;

    background-color: $color-white;
    box-shadow: 2px 2px 3px 0 rgba(42, 42, 44, 0.4);

    transform: rotate(45deg);
  }
}

.left {
  composes: bubble;

  right: $bubble-offset * -1;

  &::before {
    right: $bubble-triangle-position;
  }
}

.right {
  composes: bubble;

  left: calc(100% - #{$bubble-trigger-size} - #{$bubble-offset});

  &::before {
    left: $bubble-triangle-position;
  }
}

.full {
  width: 100%;
}

.half {
  width: 50%;
}

.quarter {
  width: 25%;
}