/*
 * index.css
 *
 * Copyright (C) 2022 by Posit Software, PBC
 *
 */

html,
body {
   height: 100%;
   padding: 0;
   margin: 0;
   font-family: var(--vscode-font-family);
   --ease-out: cubic-bezier(0.17, 0.57, 0.43, 1);
}

* {
   box-sizing: border-box;
   font-size: 10pt;
}

body {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: flex-start;
}

table {
   border-spacing: 0;
}

button {
   border: none;
   cursor: pointer;
   padding: 0.5em 1em;
   font-size: 11pt;
}

button.primary {
   background-color: var(--vscode-button-background);
   color: var(--vscode-button-foreground);
}

button.primary:hover {
   background-color: var(--vscode-button-hoverBackground);
   color: var(--vscode-button-foreground);
}

button.secondary {
   padding: 1em;
   background-color: var(--vscode-button-secondaryBackground);
   color: var(--vscode-button-foreground);
}

button.secondary:hover {
   background-color: var(--vscode-button-secondaryHoverBackground);
   color: var(--vscode-button-foreground);
}

#main {
   --width: 50%;
   --min-width: min(500px, 100%);
   --max-width: 700px;
   --label-width: 15ch;
   display: grid;
   grid-template-areas: 
      "launcher launcher"
      "script   script"
      ".        submit ";
   grid-template-columns: 1fr min-content;
   grid-template-rows: 1fr min-content;
   gap: 1em;
   padding: 1em;
   margin-top: 1em;
   min-width: var(--min-width);
   width: var(--width);
   max-width: var(--max-width);
   background-color: var(--vscode-settings-rowHoverBackground);

   transition: all 300ms var(--ease-out)
}

#error {
   grid-column: 1 / -1;
   grid-row: 1 / -1;
   display: none;
   align-items: center;
   justify-content: center;
   color: var(--vscode-errorForeground);
}

#main.error>*:not(#error) {
   display: none;
}

#main.error>#error {
   display: flex;
}

#launcher-ui {
   grid-area: launcher;
}

#script-options {
   grid-area: script;
}

#submit {
   grid-area: submit;
}

.form-group {
   margin-bottom: 0.5em;
}

.form-group:last-child {
   margin-bottom: 0;
}

.form-control {
   background-color: var(--vscode-input-background);
   color: var(--vscode-input-foreground);
   height: 26px;
   line-height: 26px;
   padding: 0 0.5em;
   border: none;
   min-width: 0px;
   width: 200px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

div.form-control {
  cursor: default;
}

fieldset {
   border: 1px solid var(--vscode-dropdown-border);
}

fieldset:empty {
   display: none;
}

#launcher-ui table>tbody>tr>td:first-child {
   min-width: var(--label-width);
}

#launcher-ui table>tbody>tr>td:nth-child(2) {
   position: relative;
   width: 100%;
   margin-left: 0.25em;
}

#rstudio_label_image {
   width: 100%;
}

.input-group-addon {
   margin-left: 0.25em;
   opacity: 50%;
}

small.text-muted {
   font-size: 8pt;
   opacity: 50%;
}

.form-grid {
   display: grid;
   grid-template-columns: var(--label-width) 1fr min-content;
   align-items: center;
   row-gap: 0.5em;
}

#arg-list {
   grid-column: 1 / -1;
   height: 1px;
   background-color: var(--vscode-dropdown-border);
   margin: 0 0.5em;
}

#arg-list:last-child {
   display: none;
}

.form-grid button {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 26px;
   line-height: 26px;
   background-color: var(--vscode-input-background);
   color: var(--vscode-foreground);
   font-size: 9pt;
}

.form-grid .browse-button, .delete-button {
   position: relative;
   width: 9ch;
   transition: width var(--ease-out) 300ms;
   overflow: hidden;
}

.form-grid .browse-button::before, .delete-button::before {
   display: grid;
   content: "";
   position: absolute;
   top: 3px;
   left: 0;
   bottom: 3px;
   width: 1px;
   background-color: var(--vscode-button-secondaryHoverBackground);
}

.form-grid .browse-path {
   width: 100%;
   cursor: pointer;
   position: relative;
   overflow: hidden;
}

.form-grid .browse-path[data-lang]:not([data-lang=""]) {
   padding-left: 2em;
}

.form-grid .browse-path[data-lang]:not([data-lang=""])::before {
   --col: #447099;
   color: var(--col);
   content: "";
   position: absolute;
   top: 0;
   left: 0.5em;
   bottom: 0;
   height: 100%;
   line-height: 100%;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   width: 1em;
}

.form-grid .browse-path:hover, .form-grid .browse-path:hover + .browse-button {
   background-color: var(--vscode-button-secondaryHoverBackground);
   color: var(--vscode-button-foreground);
}

.form-grid:not(.show-arguments) .argument { 
   display: none;
}

@media screen and (max-width: 550px) {
   #main {
      margin-top: 0;
      --width: 100%;
      --min-width: var(--width);
      --max-width: var(--width);
      background-color: transparent;
      padding: 1em 2em;
   }
}

@media screen and (max-width: 490px) {
   .form-grid .browse-button {
      width: 2em;
      color: transparent !important;
   }
   .form-grid .delete-button {
      width: 2em;
   }

   .form-grid .browse-button::after {
      content: "...";
      position: absolute;
      inset: 0 0.5em;
      color: var(--vscode-foreground);
      text-align: center;
   }
}

.delete-button:hover {
   background-color: red;
   color: white;
}

.delete-button:hover::before {
   display: none;
}

.disabled {
   pointer-events: none; 
   opacity: 50%;
   filter: grayscale(98%);
}
