/*
'Shell commands' plugin for Obsidian.
Copyright (C) 2021 - 2022 Jarkko Linnanvirta

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, version 3 of the License.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.

Contact the author (Jarkko Linnanvirta): https://github.com/Taitava/
*/

/*
 * COMMON
 */

.SC-hide {
    display: none;
}

.SC-scrollable {
    overflow-y: auto;
}

.SC-no-margin {
    margin: 0;
}

.SC-no-top-border {
    border-top: none;
}

.SC-wrappable {
    white-space: normal;
}

.SC-small-font {
    font-size: 80%;
}

/*
 * SETTING GROUPS
 * Related setting fields combined together.
 */

div.SC-setting-group div.setting-item:not(div.setting-item-heading+div.setting-item) {
    /* Remove top border from all settings in the group, except settings that come AFTER a heading setting, as it looks
     * good when there is a border line below a heading setting.
     */
    border-top: none;
}

div.SC-setting-group div.setting-item {
    padding: 5px; /* Shrink the padding. */
}

div.SC-setting-group div.setting-item div.setting-item-info,
div.SC-setting-group div.setting-item div.setting-item-control {
    width: 50%; /* Make sure description does not take over 50% of the space. */
}

div.SC-setting-group div.setting-item input[type=text],
div.SC-setting-group div.setting-item input[type=search],
div.SC-setting-group div.setting-item textarea,
div.SC-setting-group div.setting-item select {
    width: 100%; /* Enlarge fields. */
    max-width: 100%; /* Remove a maximum width limitation, at least <select> elements had one. */
}

div.SC-setting-group div.setting-item textarea {
    resize: vertical; /* Allow resizing multiline text fields vertically. Don't allow horizontal resizing, because the width is already maxed out (to 50%), and horizontal resizing would just make the field accidentally narrower. */
}

div.SC-setting-group div.SC-no-description div.setting-item-info { /* .SC-no-description is used by the 'alias' setting field. */
    width: 0;
    margin: 0;
}

div.SC-setting-group div.SC-no-description div.setting-item-control { /* .SC-no-description is used by the 'alias' setting field. */
    width: 100%;
}


/*
 * SHELL COMMAND SETTING CONTAINERS
 */

div.SC-name-setting,
div.SC-shell-command-setting,
div.SC-preview-setting {
    padding: 0;
}

div.SC-name-setting {
    padding-top: 18px;
}

div.SC-shell-command-setting {
    border-top: none;
    padding: 5px 0; /* Padding top & bottom 5px, sides 0. */
}

div.SC-preview-setting {
    border-top: none;
    padding-bottom: 18px;
}

div.SC-shell-command-setting div.setting-item-info {
    /* Make the left cell (=div.setting-item-info) to have no space at all: */
    flex: none;
    flex-grow: unset;
    margin-right: 0;
}


/*
 * SHELL COMMAND SETTING FIELDS
 */

div.SC-shell-command-setting textarea {
    width: 100%;
    padding: 2px 5px; /* Shrink the padding all around the textarea. */
    resize: vertical;
}

div.SC-hotkey-info svg {
    vertical-align: middle; /* Not middle but close enough. */
}

/*
 * SHELL COMMAND ICONS (not button icons, just informational icons)
 */

span.SC-main-icon-container {
    margin-left: 10px;
}


/*
 * CUSTOM VARIABLE SETTINGS
 */

div.setting-item.SC-custom-variable-name-setting div.setting-item-control::before {
    content: "{{_"; /* Wrap custom variable name field in {{_ }} */
}

div.setting-item.SC-custom-variable-name-setting div.setting-item-control::after {
    content: "}}"; /* Wrap custom variable name field in {{_ }} */
}


/*
 * PROMPT MODALS
 */

p.SC-prompt-dry-run-notice {
    font-style: italic;
    font-weight: bold;
}


/*
 * Tab elements
 * This CSS is copied 2021-10-21 from https://www.w3schools.com/howto/howto_js_tabs.asp
 * Modifications:
 *  - Renamed classes
 *  - Added tab icons.
 *  - Changed colors.
 *  - Changed/removed borders.
 *  - Removed button transition.
 *  - Changed button border-radiuses
 *  - Added margin-right rule to .SC-tab-header-button .
 */

/* Style the tab */
.SC-tab-header {
    border-bottom: 2px solid var(--background-modifier-border);
    background-color: var(--background-secondary);
}

/* Style the buttons that are used to open the tab content */
.SC-tab-header-button {
    background-color: unset !important;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    margin-right: 6px; /* Reduced margin. Obsidian's default margin-right for button is 12px (0 for other margins). */
    border-radius: 10px 10px 0 0; /* 0 0 = No border-radius at bottom */
}

/* Create an active/current tablink class */
.SC-tab-header-button.SC-tab-active,
.SC-tab-header-button:hover {
    background-color: var(--background-modifier-border) !important;
}

.SC-tab-header-button svg {
    vertical-align: middle; /* Not middle but close enough. */
}

/* Style the tab content */
.SC-tab-content {
    display: none;
    padding: 6px 12px;
}

.SC-tab-content.SC-tab-active {
    display: block;
}


/*
 * AUTOCOMPLETE
 */

.SC-autocomplete {
    background-color: var(--background-primary-alt);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    color: var(--text-normal);
    z-index: 100; /* Otherwise the element will be behind everything = invisible. */
    width: auto !important; /* Otherwise the element will be as wide as the text input field. */
}

.SC-autocomplete > div {
    padding: 0 5px 2px 10px;
}

.SC-autocomplete > div > span.SC-autocomplete-value {
    font-weight: bold;
}

.SC-autocomplete > div > span.SC-autocomplete-help-text {
    font-size: 90%;
    font-style: italic;
}

.SC-autocomplete > div.selected,
.SC-autocomplete > div:hover:not(.group) {
    cursor: pointer;
    background-color: var(--text-selection);
    color: var(--text-normal);
}

.SC-autocomplete > div.group {
    background-color: var(--background-modifier-border);
    padding-left: 5px;
    font-size: 75%;
}

/*
 * OUTPUT CHANNEL: ASK AFTER EXECUTION (OutputModal TypeScript class)
 */

div.SC-output-channel-modal-textarea-container textarea {
    width: 100%;
    min-width: 100%;
    min-height: 15em;
    resize: both;
}

div.SC-output-channel-modal-redirection-buttons-container div.setting-item-control {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}

div.SC-output-channel-modal-redirection-buttons-container div.setting-item-control button {
    margin: 0;
    flex-grow: 1;
}