@import '../dynamic.scss';

.folded-corner {
    &.folded-corner-white-bggray {
        background-color: $white;

        &::after {
            border-color: $gray-100 $gray-100 $gray-400 $gray-400;
        }
    }
    &.folded-corner-gray-bgwhite {
        background-color: $gray-200;

        &::after {
            border-color: $white $white $gray-400 $gray-400;
        }
    }

    // generic style for the container
    text-align: left;
    margin: 0 0 1rem 0;
    padding: 1.5rem;
    border-radius: $border-radius-lg 0 $border-radius-lg $border-radius-lg;
    box-shadow: 1px 1px transparentize($black, 0.75);
    position: relative;

    &::after {
        content: '';
        background: #658e15;
        border-style: solid;
        border-width: 1rem;
        border-radius: 0 0 0 $border-radius-lg;
        position: absolute;
        top: 0;
        right: -1px;
    }

    dt {
        padding: 0 0 1rem 0;
        font-weight: bold;
    }

    dd {
        padding: 0 0 1rem 0;
        margin: 0;

        &:last-child {
            padding-bottom: 0;
        }
    }
}