.notyf {
    &__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 {
            &::before,
            &::after {
                left: 50%;
                width: 0.15em;
                background-color: currentcolor;
                border-radius: 0.03em;
                transform: translateX(-50%);
            }

            &::before {
                top: 0.4em;
                height: 0.38em;
            }

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

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

            &::before {
                top: 0.21em;
                height: 0.38em;
            }

            &::after {
                top: 0.65em;
                height: 0.13em;
            }
        }
    }
}
