/**
 * Notyf custom styles for PHPFlasher
 *
 * These styles define custom icons for additional notification types
 * (info and warning) beyond the default success and error types
 * provided by Notyf.
 *
 * @author Younes ENNAJI
 */

.notyf {
    // Common styles for custom icons
    &__icon {
        &--warning,
        &--info {
            position: relative;
            box-sizing: border-box;
            display: block;
            width: 1em;
            height: 1em;
            margin: 0 auto;
            background: white;
            border-radius: 50%;

            &::before,
            &::after {
                position: absolute;
                box-sizing: border-box;
                content: "";
                border-width: 0;
                transition: all 1s;
            }
        }

        // Info icon (i)
        &--info {
            &::before,
            &::after {
                left: 50%;
                width: 0.15em;
                background-color: currentcolor;
                border-radius: 0.03em;
                transform: translateX(-50%);
            }

            // Vertical line
            &::before {
                top: 0.4em;
                height: 0.38em;
            }

            // Dot and shadow
            &::after {
                top: 0.21em;
                height: 0.13em;
                box-shadow: -0.06em 0.19em, -0.06em 0.44em, 0.06em 0.44em;
            }
        }

        // Warning icon (!)
        &--warning {
            &::before,
            &::after {
                left: 50%;
                width: 0.15em;
                background-color: currentcolor;
                border-radius: 0.03em;
                transform: translateX(-50%);
            }

            // Exclamation vertical line
            &::before {
                top: 0.21em;
                height: 0.38em;
            }

            // Exclamation dot
            &::after {
                top: 0.65em;
                height: 0.13em;
            }
        }
    }
}
