@mixin box-shadow($color, $fromLeft: true) {
  @if $fromLeft {
    // prettier-ignore
    box-shadow:
      -4px 0,
      4px 0,
      -4px 4px $color,
      0 4px,
      -8px 4px,
      -4px 8px,
      -8px 8px;
  } @else {
    // prettier-ignore
    box-shadow:
      -4px 0,
      4px 0,
      4px 4px $color,
      0 4px,
      8px 4px,
      4px 8px,
      8px 8px;
  }
}

.nes-ui-toast {
  @include pixel-borders(
    $corner-size: 1,
    $border-size: $border-size,
    $border-color: 'color-black-absolute',
    $border-inset-color: false
  );

  position: relative;
  display: flex;
  padding: 1rem 1.5rem;
  margin: 8px;
  margin-bottom: 30px;
  background: var(--color-white-absolute);

  > :last-child {
    margin-bottom: 0;
  }

  & .nes-ui-text {
    margin-bottom: 0;
  }

  &::before,
  &::after {
    position: absolute;
    content: '';
  }

  &.nes-ui-clickable {
    cursor: var(--cursor-click-url), pointer;
  }

  &:not(.nes-ui-clickable) {  
    cursor: var(--cursor-url), default;
  }

  &.nes-ui-from-left,
  &.nes-ui-from-right {
    &::before,
    &::after {
      left: 2rem;
    }

    &::before {
      bottom: -14px;
      width: 26px;
      height: 10px;
      border-right: 4px solid var(--color-black);
      border-left: 4px solid var(--color-black);
      background-color: var(--color-white);
    }
    &::after {
      bottom: -18px;
      width: 18px;
      height: 4px;
      margin-right: 8px;
      color: $base-color;
      background-color: var(--color-white);
      @include box-shadow($color-white);
    }
  } 

  &.nes-ui-from-right {
    &::before,
    &::after {
      left: unset;
      right: 2rem;
    } 
 
    &::after {
      margin-right: 4px;
      @include box-shadow($color-white, false);
    }
  }
}

.nes-ui-dark-mode {
  .nes-ui-toast {
    @include pixel-borders(
      $corner-size: 1,
      $border-size: $border-size,
      $border-color: 'color-white-absolute',
      $border-inset-color: false
    );

    border-radius: 0 !important;
    color: var(--color-white);
    background: var(--color-black-absolute);

    &.nes-ui-from-left,
    &.nes-ui-from-right {
      &::before {
        background-color: var(--color-black);
        border-color: var(--color-white);
      }

      &::after {
        color: var(--color-white);
        background-color: var(--color-black);
      }
    }

    &.nes-ui-from-left {
      &::before { 
        box-shadow: -5px 10px 0 6px var(--color-black);
      }
      &::after {
        @include box-shadow($color-black);
      }
    }

    &.nes-ui-from-right {
      &::before {
        box-shadow: 5px 10px 0 6px var(--color-black);
      }
      &::after {
        @include box-shadow($color-black, false);
      }
    }
  }
}