@use '../globals/breakpoints';

.bubble-container {
  display: flex;
  margin-bottom: 8px;
}

.bubble {
  position: relative;
  width: fit-content;
  height: fit-content;
  margin-right: 16px;
  margin-left: 8px;
  padding: 8px 20px;
  font-size: 1.4rem;
  text-align: left;
  background-color: var(--pix-primary-100);
  border-radius: 16px 16px 16px 0;

  @include breakpoints.device-is('tablet') {
    font-size: 1.25rem;
  }

  ul, ol {
    padding: revert;
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  a {
    color: var(--pix-primary-700);
    text-decoration: underline;

    &:active,
    &:focus,
    &:hover {
      color: var(--pix-primary-700);
    }
  }

  a:not(.internal-link)::after {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin: 0 0.2rem;
    background-image: url('/images/icons/external-link-alt.svg');
    background-repeat: no-repeat;
    background-size: 1rem;
    content: '';
  }


  &::after {
    position: absolute;
    bottom: 0;
    left: -7px;
    display: block;
    width: 0;
    border-color: transparent var(--pix-primary-100);
    border-style: solid;
    border-width: 12px 8px 0 0;
    content: "";
  }

  &--success {
    background-color: var(--pix-success-100);

    &::after {
      border-color: transparent var(--pix-success-100);
    }
  }

  &--warning {
    background-color: var(--pix-secondary-100);

    &::after {
      border-color: transparent var(--pix-secondary-100);
    }
  }

  &--error {
    background-color: var(--pix-error-100);

    &::after {
      border-color: transparent var(--pix-error-100);
    }
  }
}

