@use "../../global-modules.scss" as *;

.ReleaseNote {
    margin-top: 0px;
    :global {
        .section-title {
            font-size: 22px;
            font-weight: 700;
            margin: 32px 0 20px;
        }

        .section-content {
            display: flex;

            p {
                margin: 0;
            }
        }

        .tag {
            color: color("gray-90");
            font-size: 14px;
            height: 18px;
            padding: 0 8px;
            text-transform: none;
            line-height: normal;
            text-align: center;
            width: fit-content;

            &--feature,
            &--recently-completed {
                background-color: color("cyan-10v");
            }

            &--bug {
                background-color: color("red-cool-30v");
            }

            &--announcement,
            &--next {
                background-color: color("indigo-cool-20v");
            }

            &--improvement,
            &--working-on-now {
                background-color: color("mint-cool-10v");
            }
        }
    }

    &:global(.divider) {
        :global {
            .header {
                color: color("gray-cool-50");
                font-size: 32px;
                font-weight: 700;
                margin: 54px 0 32px;
            }

            .section-container:last-child {
                border-bottom: 1px solid color("gray-cool-10");
                margin-bottom: 0;
                padding-bottom: 64px;
            }
        }
    }

    .section-title {
        font-size: 22px;
        font-weight: 700;
        margin: 32px 0 20px;
    }

    .section-content {
        display: flex;

        p {
            margin: 0;
        }
    }

    .tag {
        color: color("gray-90");
        font-size: 14px;
        height: 18px;
        padding: 0 8px;
        text-transform: none;
        line-height: normal;
        text-align: center;
        width: fit-content;

        &--feature {
            background-color: color("cyan-10v");
        }

        &--bug {
            background-color: color("red-cool-30v");
        }

        &--announcement {
            background-color: color("indigo-cool-20v");
        }

        &--improvement {
            background-color: color("mint-cool-10v");
        }
    }
}
