.notice-tune {
    background: linear-gradient(90deg, var(--nt-border-bg) 0px, var(--nt-border-bg) 6px, transparent 6px);
    
    &__input {
        position: relative;
        padding-left: 45px;
        background-repeat: no-repeat;
        background-position: 15px;
        margin: 10px 0;
        display: none;
        border-color: var(--nt-border-bg);
    }

    & &__input {
        display: block;
    }

    &~& {
        margin-top: 1.5em;
    }

    &--info+&--info,
    &--warning+&--warning,
    &--spoiler+&--spoiler {
        margin-top: 0;
    }

    &--info+&--info &__input,
    &--warning+&--warning &__input,
    &--spoiler+&--spoiler &__input {
        display: none;
    }

    &--info {
        --nt-border-bg: #5cb6ff;
    }

    &--warning {
        --nt-border-bg: #ffd025;
    }

    &--spoiler {
        --nt-border-bg: #424242;
    }

    &__tune-wrapper {
        display: flex;
        gap: 6px;
        margin: 5px 0;

        & > .cdx-button {
            flex-grow: 1;
            padding: 6px;
            display: flex;
            align-items: center;
            justify-content: center;

            &.active {
                background: var(--color-background-icon-active);
                color: var(--color-text-icon-active);
            }

            & svg {
                width: 18px;
                height: 18px;
            }
        }
    }
}