/**
 * Стили для маркеров и подсказок в редакторе кода
 *
 * @since      1.0.0
 * @package    Piton_Learning_Platform
 */

/* Общие стили для маркеров */
.piton-marker-error,
.piton-marker-warning,
.piton-marker-info,
.piton-marker-suggestion {
    padding: 2px 0;
    position: relative;
}

/* Стили для разных типов маркеров */
.piton-marker-error {
    background-color: rgba(255, 0, 0, 0.1);
    border-left: 2px solid red;
}

.piton-marker-warning {
    background-color: rgba(255, 165, 0, 0.1);
    border-left: 2px solid orange;
}

.piton-marker-info {
    background-color: rgba(0, 0, 255, 0.1);
    border-left: 2px solid blue;
}

.piton-marker-suggestion {
    background-color: rgba(0, 128, 0, 0.1);
    border-left: 2px solid green;
}

/* Стили для маркеров в гаттере */
.CodeMirror-lint-marker-error {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="red" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>');
    background-position: center center;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
}

.CodeMirror-lint-marker-warning {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="orange" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>');
    background-position: center center;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
}

.CodeMirror-lint-marker-info {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="blue" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>');
    background-position: center center;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
}

.CodeMirror-lint-marker-suggestion {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="green" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
    background-position: center center;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
}

/* Стили для виджетов с подсказками */
.piton-hint-widget {
    margin: 5px 0;
    padding: 5px 10px;
    border-radius: 4px;
    background-color: #f9f9f9;
    border-left: 3px solid #00bcd4;
}

.piton-hint-button {
    background-color: #00bcd4;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
    margin-bottom: 5px;
}

.piton-hint-button:hover {
    background-color: #0097a7;
}

.piton-hint-content {
    padding: 8px;
    background-color: #fff;
    border-radius: 3px;
    border: 1px solid #e0e0e0;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.5;
}

/* Стили для кнопки анализа кода */
.piton-analyze-button {
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: 500;
}

.piton-analyze-button:hover {
    background-color: #388e3c;
}

/* Стили для индикатора загрузки при анализе */
.piton-analyzing {
    display: inline-block;
    margin-left: 10px;
    font-style: italic;
    color: #666;
}