/*
 * SPDX-FileCopyrightText: 2025-present Tobias Kunze
 * SPDX-License-Identifier: Apache-2.0
 */

.markdown-wrapper {
  border: 1px solid #ced4da;
  border-radius: var(--size-border-radius);
  background: white;

  .markdown-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ced4da;
  }
  .markdown-nav[role="tablist"] {
    margin-bottom: 0;
    border-bottom: none;
    flex-shrink: 0;
    input[type="radio"][role="tab"] {
      &:checked + label {
        border-bottom-color: var(--color-primary);
      }
    }
  }
  .markdown-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    margin-left: auto;
    md-bold, md-italic, md-strikethrough, md-header, md-link, md-quote, md-code, md-unordered-list, md-ordered-list {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border: none;
      background: transparent;
      border-radius: var(--size-border-radius);
      color: var(--color-text);
      cursor: pointer;
      font-size: 14px;
      &:hover {
        background: var(--color-border);
      }
      &:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
      }
    }
    .markdown-toolbar-divider {
      width: 1px;
      height: 18px;
      background: var(--color-border);
      margin: 0 4px;
    }
  }
  .markdown-tabpanel {
    display: none;
    background-color: var(--color-offwhite);
    padding: 1px;
    &[aria-hidden="false"] {
      display: block;
    }
  }
  textarea {
    min-height: 140px;
    margin: 8px;
    width: calc(100% - 16px);
    border-radius: var(--size-border-radius);
  }
  .markdown-preview {
    border-bottom-left-radius: var(--size-border-radius);
    border-bottom-right-radius: var(--size-border-radius);
    min-height: 140px;
    background: var(--color-bg);
    color: var(--color-text-input);
    flex-direction: column;
    &[aria-hidden="false"] {
      display: flex;
    }
    .preview-content {
      flex-grow: 1;
      padding: 0.375rem 0.75rem;
      overflow-y: auto;
    }
    .preview-footer {
      height: 28px;
      border-top: 1px solid #ced4da;
      background-color: var(--color-offwhite);
      padding: 0.1rem 0.375rem;
      border-bottom-left-radius: var(--size-border-radius);
      border-bottom-right-radius: var(--size-border-radius);
    }
  }
}

.i18n-markdown-group > .markdown-wrapper + .markdown-wrapper {
  margin-top: 0.5rem;
}

.i18n-markdown-group .markdown-wrapper textarea[lang] {
  background-image: none !important;
  padding-left: 0.75rem;
}

.i18n-form-group .markdown-header[lang] {
  background-repeat: no-repeat;
  background-position: 20px center;
  padding-left: 50px;
}

.i18n-form-single-language .markdown-header[lang] {
  background: none !important;
  padding-left: 0;
}