/**
 * @license GNU AGPL version 3 or any later version
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * 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 Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */

.cm-settings {
  &--nav {
    padding-top: 30px;
  }

  &-nav {
    .app-navigation__content {
      padding: 20px;
    }

    .app-navigation-entry-icon {
      display: none !important;
    }

    .app-navigation-entry__name {
      padding-left: 10px !important;
    }
  }

  &-tips {
    margin-bottom: 15px;
  }

  &-section {
    width: 100%;
    padding: 20px;

    &--hidden {
      display: none;
    }
  }

  &-item {
    display: flex;
    justify-content: start;
    margin-bottom: 10px;

    &--disabled {
      opacity: 0.5;
    }

    &-label {
      max-width: 350px;
      width: 100%;
      padding-right: 20px;

      &--short {
        max-width: 300px;
      }

      &--top {
        vertical-align: top;
      }

      &--middle {
        display: flex;
        flex-direction: column;
        text-align: left;
      }
    }

    &-form {
    }
  }

  &-form {
    &-arrow {
      color: var(--color-text-maxcontrast);
      display: inline-block;
      margin-right: 3px;
    }

    &-draggable {
      cursor: pointer;
      padding: 8px 12px;
      border-bottom: 1px solid var(--color-border);
    }

    &-displaypicker {
      img {
        padding: 10px 10px 10px 0;
        border: 2px solid transparent;
        max-width: 100%;
        cursor: pointer;
      }
    }

    &-colorpicker {
      display: inline-block;
      margin-right: 12px;
      width: 60px;
      height: 30px;

      &-value {
        cursor: pointer;
        width: 60px;
        height: 30px;
        border-radius: 6px;
        border: 1px solid var(--color-border);
      }
    }

    &-range {
      input {
        min-height: auto;
      }

      div * {
        vertical-align: middle;
      }

      em + input,
      input + em {
        margin-left: 10px;
      }
    }

    &-catsort-modal {
      .modal__footer {
        padding: 20px;
        text-align: right;
      }

      .modal__footer button {
        display: inline-block;
      }
    }

    &-appsort-modal {
      .modal__footer {
        text-align: right;
        padding: 20px;
      }

      .modal__footer button {
        display: inline-block;
      }
    }

    &-apppicker-modal {
      .modal__content {
        padding: 20px;
      }

      .modal__footer {
        margin-top: 20px;
        text-align: right;
      }

      .modal__footer button {
        display: inline-block;
      }

      img {
        width: 15px;
        height: 15px;
      }
    }

    &-appcategory-modal {
      .modal__content {
        padding: 20px;
      }

      .menu button {
        display: inline-block;
        margin-right: 5px;
      }

      .modal__footer {
        margin-top: 20px;
        text-align: right;
      }

      .modal__footer button {
        display: inline-block;
      }

      td {
        padding: 5px 0;
      }

      tr:hover,
      td:hover {
        background: none !important;
      }

      .form {
        padding: 10px 0;
      }

      img {
        width: 15px;
        height: 15px;
      }

      .btn-close {
        margin-left: 20px;
      }
    }
  }

  &-btn {
    &--save {
      margin-top: 30px;
    }
  }

  &-config-modal {
    textarea {
      width: 100%;
      height: 30vh;
    }

    .modal__content {
      padding: 20px;
    }

    .modal__footer {
      margin-top: 20px;
      text-align: right;
    }

    .modal__footer button {
      display: inline-block;
      margin-right: 5px;
    }
  }

  &-children-inline {
    > * {
      display: inline-block !important;
      margin-right: 5px;
      margin-bottom: 5px;
    }
  }

  &-button-inline {
    .button-vue {
      display: inline-block !important;
      margin-right: 5px;
      margin-bottom: 5px;
    }
  }
}