@layer base {
  :root {
    --snackbar-bottom-offset: theme(spacing.8);
  }
}

@layer components {
  [data-coco][data-component="app-snackbar"] {
    @apply bg-background-dark-2 rounded-xl overflow-hidden shadow-xl w-full;
    max-width: 360px;

    .snackbar-container {
      @apply flex items-center py-2 pl-4 pr-2;
    }

    .snackbar-icon {
      @apply flex-none mr-2.5 flex text-content-light-1 items-center;

      .coco-icon {
        @apply w-5 h-5;
      }
    }

    .snackbar-content {
      @apply text-label-md text-content-light-1 font-semibold flex-grow mr-2 my-2;
    }

    .coco-button {
      @apply hover:bg-background-dark-3;
    }

    .snackbar-action {
      @apply flex-none ml-auto;

      .coco-button {
        @apply px-2 text-content-info-inverse;
      }
    }

    .snackbar-dismiss {
      @apply flex-none ml-auto;

      .coco-button {
        @apply text-content-light-2 hover:text-content-light-1;
      }
    }

    /* Positioning */

    &[data-position="static"] {
      @apply static;
    }

    &[data-position="fixed"] {
      @apply fixed left-1/2 -translate-x-1/2;
      bottom: var(--snackbar-bottom-offset);
      z-index: 10001;
    }

    /* Themes */

    &[data-theme="positive"] {
      .snackbar-icon {
        @apply text-content-positive-inverse;
      }
    }

    &[data-theme="warning"] {
      .snackbar-icon {
        @apply text-content-warning-inverse;
      }
    }

    &[data-theme="negative"] {
      .snackbar-icon {
        @apply text-content-negative-inverse;
      }
    }

    &[data-theme="pending"] {
      .snackbar-icon {
        @apply text-content-info-inverse;
      }
    }

    /* Transitions */

    &.snackbar-enter {
      @apply transition ease-out duration-150;
    }

    &.snackbar-enter-start {
      @apply opacity-0 scale-90;
    }

    &.snackbar-enter-end {
      @apply opacity-100 scale-100;
    }

    &.snackbar-leave {
      @apply transition ease-in duration-150;
    }

    &.snackbar-leave-start {
      @apply opacity-100 scale-100;
    }

    &.snackbar-leave-end {
      @apply opacity-0 scale-90;
    }
  }
}