@charset "utf-8";

.#{$prefix}breaking{
    max-width: 500px;
    margin:0 auto;
    text-align: center;

    &__img{
        margin-bottom:24px;
    }

    &__description{
        & > p{
            margin-bottom: 8px;
        }
    }

    &__code{
        text-align: left;
        margin-top:24px;

        &-title{
            color:var(--text-label-color);
            margin-bottom:8px;
        }

        &-area{
            border:1px solid var(--border-color);
            line-height: 18px;
            counter-reset: line;
            padding:8px 0;
        }

        &-line{
            position: relative;
            padding-left: 40px;
            word-wrap:break-word;
            word-break:break-word;
            &::before{
                counter-increment: line;
                content:counter(line);
                width:32px;
                padding:0 8px;
                position: absolute;
                left:0;
                top:0;
                bottom:0;
                text-align: right;
                border-right:1px solid var(--border-color);
                margin-right: 8px;
                line-height: 18px;
            
            }
            &:first-child::before {
                top: -8px;
                padding-top:8px;

            }
            &:last-child::before {
                bottom        : -8px;
                padding-bottom: 8px;

            }
        }
    }
}