@import 'common';

#control-panel {
  div.option {
    button {
      text-align: left;
      word-break: break-word;
      span {
        font-size: 0.7em;
      }
    }
    input.with-hashmark {
      width: 100%;
      margin: 0;
    }
    datalist.hashmark {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    
    &.half-width {
      & > label {
        width: 100%;
        // put this relative so input elements can be aligned to the right
        position: relative;
        span {
          // middle works for monospace, sub works for sans-serif
          vertical-align: sub;
        }
        input[type=text] {
          width: 70%;
          position: absolute;
          top: 1px;
          right: 0;
          padding: 2px 4px;
        }
      }
    }
    
    // item specific styles
    &[data-name="custom-skin"] {
      .file-input-container {
        position: relative;
        &.inactive {
          #currentlyLoadedCustomSkin, button[data-name="remove"] {
            display: none;
          }
        }
      }
      #currentlyLoadedCustomSkin {
        display: inline-block;
        &.inactive { display: none; }
        width: 70%;
        height: 1.25em;
        vertical-align: middle;
        overflow: hidden;
        word-break: break-all;
        &:before {
          content: 'Currently Loaded: ';
          font-size: 0.75em;
          vertical-align: 1px;
        }
      }
    }
  }
}
