@use "configs.color" as *;

#theme-builder {

  #download-js-modal {
    pre {
      max-height: 200px;
      overflow-y: auto;
      border-radius: 0 4px 4px 4px;
      background-color: $clr-lightest;
      border-color: $clr-border;
      transition: 0.5s;

      &:hover {
        box-shadow: inset 0 0 10px #ccc;
      }

      code {
        position: relative;
        top: -20px;
        background: transparent;
      }
    }

    h4 ~ h4 {
      margin-top: 20px;
    }

    .tab-content {
      margin-top: 10px;
    }
  }

  .code-btn {
    .btn {
      border-radius: 4px 0 0 0;
      border-bottom: 0;
    }

    .btn ~ .btn {
      border-radius: 0 4px 0 0;
    }

    label {
      font-size: 0.9em;
      margin-left: 10px;
      display: none;
      background-color: #ffa;
      padding: 1px 5px;
    }
  }

  .nav-tabs {
    margin-top: 10px;
  }

  .modal-dialog {
    // Leave space to nav bar.
    margin-top: 100px;
  }

  @media (min-width: 960px) {
    .modal-dialog {
      width: 900px;
    }
  }
}