@textColor: #767676;

@primaryColor: #6bc1d3;
@secondaryColor: #465861;
@successColor: #81a773;
@warningColor: #fec760;
@dangerColor: #ea6555;
@disabledColor: #a7a7a7;
@inactiveColor: #fafaf8;
@closeColor: #bfbfbf;

.Story {
    margin: 24px 0;
    color: @textColor;

    &-header {
        font-size: 20px;
        font-weight: normal;
        color: @primaryColor;
        border-bottom: 1px solid @primaryColor;
        padding-bottom: 12px;
        text-align: center;
    }

    .Chapter {
        &-description {
            margin-bottom: 24px;
            color: #fff;
            background: @secondaryColor;
            padding: 12px;
			font-size: 12px;
			border-radius: 5px;
        }

        &-header {
            text-transform: uppercase;
            font-size: 16px;
		}
		
		&--dark {
			.Item {
				background: @secondaryColor;
			}

			.Item-header {
				color: #ccc;
			}
		}
    }

    .Item {
        display: inline-block;
        border: 1px solid #e7e7e7;
        padding: 24px;
        width: 30%;
        box-sizing: border-box;
        border-radius: 5px;
        margin: 0 1% 1% 0;

        &-header {
            font-weight: normal;
            margin: 0 0 24px 0;
            font-size: 12px;
        }
    }
}
