$module-parameter-padding: 0.5rem 1rem;

@mixin module-parameter {
  @include content-1;
  display: block;
  width: 100%;
  height: 3.5rem;
  padding: $module-parameter-padding;
  color: $brand-text--darker;
  border-radius: 3px;
  border: 2px solid $Vlight-gray;
  background-color: $Vlight-gray;
  outline: none;

  &:hover {
    border-color: $dark-accent--soft;
  }

  &:focus {
    border-color: $data-action--border; // overrides :hover
  }
}
%module-parameter {
  @include module-parameter;
}

@mixin autosize-with-textarea {
  // HTML <div> with the following structure:
  // <div class="this-div">
  //   <div class="invisible-size-setter">Value value value</div>
  //   <textarea ...>Value value value</textarea>
  // </div>
  //
  // That is, the _contents_ of .invisible-size-setter and textarea are the
  // same. We set position=relative and textarea position absolute -- this
  // makes the textarea take the size of its contents.
  position: relative;
  word-break: break-all;

  .invisible-size-setter,
  textarea {
    white-space: pre-wrap;
  }

  .invisible-size-setter {
    visibility: hidden;

    &:empty::before {
      content: ' ';
      display: inline;
    }
  }

  textarea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    resize: none;
    overflow: hidden; // during edit, avoid adding a scrollbar that affects width
  }
}

@mixin add-module-button-container {
  width: $module-width;
  margin: 0 $module-margin-right 0 $module-margin-left;

  & > button {
    @include action-button;
    @include button-blue;

    // Button to invoke add-module -- both in-between modules and at bottom of stack
    @include content-1;
    font-weight: bold; // [adamhooper, 2019-03-28] TODO move this to fonts.scss instead of extending content-1
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-transform: uppercase;
    cursor: pointer;

    i {
      font-size: 1.5rem;
      margin-right: 0.7rem;
    }

    span {
      margin-top: 0.1rem;
    }
  }
}

/* Pattern for "<div className='toggle'><input type="checkbox"/><label/></div>" */
@mixin toggle-slider {
  $toggle-size: rem(1);
  $toggle-border: 1px;

  // https://codepen.io/mburnette/pen/LxNxNg
  input {
    height: 0;
    width: 0;
    visibility: hidden;
    position: absolute;
  }

  label {
    margin: 0;
    cursor: pointer;
    width: 2 * $toggle-size;
    height: $toggle-size;
    position: relative;
    display: block;
    background: $text-muted;
    border-radius: $toggle-size / 2;

    &::after {
      content: '';
      position: absolute;
      top: $toggle-border;
      left: $toggle-border;
      width: calc(#{$toggle-size} - #{2 * $toggle-border});
      height: calc(#{$toggle-size} - #{2 * $toggle-border});
      background: white;
      border-radius: calc(#{$toggle-size / 2} - #{$toggle-border / 2});
      transition: 0.1s;
    }
  }

  input:checked + label {
    background: $primary;

    &::after {
      left: calc(100% - #{$toggle-border});
      transform: translateX(-100%);
    }
  }

  label:active::after {
    width: 1.25 * $toggle-size;
  }
}
