/**
 * Custom Shortcodes Styling
 */

/* Note Shortcode Styles */
.custom-note {
    border: 1px solid;
    border-radius: 4px;
    margin: 1.5em 0;
    padding: 1em;
    position: relative;
    font-size: 1em;
}

.custom-note-title {
    font-weight: bold;
    display: inline;
    margin-right: 0.1em;
    font-size: inherit;
}

.custom-note-content {
    display: inline;
    font-size: inherit;
}

.custom-note-info {
    background-color: #e8f4fd;
    border-color: #c2e0ff;
    color: #0c5394;
}

.custom-note-warning {
    background-color: #fff8e6;
    border-color: #ffe0b2;
    color: #976400;
}

.custom-note-success {
    background-color: #e8f5e9;
    border-color: #c8e6c9;
    color: #2e7d32;
}

/* Highlight Shortcode Styles */
.custom-highlight {
    padding: 2px 4px;
    border-radius: 3px;
}

.custom-highlight-yellow {
    background-color: #fff9c4;
}

.custom-highlight-green {
    background-color: #c8e6c9;
}

.custom-highlight-blue {
    background-color: #bbdefb;
}

.custom-highlight-pink {
    background-color: #f8bbd0;
}

/* Callout Shortcode Styles */
.custom-callout {
    border-left: 4px solid;
    margin: 1.5em 0;
    padding: 1em 1em 1em 1.2em;
    background-color: #f5f5f5;
    font-size: 1em;
}

.custom-callout-title {
    font-weight: bold;
    display: inline;
    margin-right: 0.1em;
    font-size: inherit;
}

.custom-callout-content {
    display: inline;
    font-size: inherit;
}

.custom-callout-icon {
    margin-right: 0.5em;
    display: inline-block;
}

.custom-callout-default {
    border-color: #607d8b;
}

.custom-callout-primary {
    border-color: #2196f3;
}

.custom-callout-secondary {
    border-color: #9c27b0;
}