// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
// and https://github.com/palantir/blueprint/blob/master/PATENTS

@import "../../common/variables";

/*
Labels

Markup:
<label class="pt-label {{.modifier}}">
  Label A
  <span class="pt-text-muted">(required)</span>
  <input class="pt-input" style="width: 200px;" type="text" placeholder="Text input" dir="auto" />
</label>
<label class="pt-label {{.modifier}}">
  Label B
  <span class="pt-text-muted">(optional)</span>
  <div class="pt-input-group">
    <span class="pt-icon pt-icon-calendar"></span>
    <input class="pt-input" style="width: 200px;" type="text" placeholder="Input group" dir="auto" />
  </div>
</label>

.pt-inline - Inline

Styleguide pt-label
*/

// stylelint-disable-next-line selector-no-qualifying-type
label.pt-label {
  display: block;
  margin: 0 0 ($pt-grid-size * 1.5);

  .pt-input,
  .pt-select {
    display: block;
    margin-top: $pt-grid-size / 2;
    text-transform: none;
  }

  .pt-select select {
    width: 100%;
    vertical-align: top;
    font-weight: 400;
  }

  &.pt-inline {
    line-height: $pt-input-height;

    .pt-input,
    .pt-input-group,
    .pt-select {
      display: inline-block;
      margin: 0 0 0 ($pt-grid-size / 2);
      vertical-align: top;
    }

    .pt-input-group .pt-input {
      margin-left: 0;
    }

    &.pt-large {
      line-height: $pt-input-height-large;
    }
  }

  /*
  Disabled labels

  Markup:
  <label class="pt-label pt-disabled">
    Label A
    <span class="pt-text-muted">(optional)</span>
    <input disabled class="pt-input" style="width: 200px;" type="text" placeholder="Text input" dir="auto" />
  </label>
  <label class="pt-label pt-disabled">
    Label B
    <div class="pt-input-group pt-disabled">
      <span class="pt-icon pt-icon-calendar"></span>
      <input disabled class="pt-input" style="width: 200px;" type="text" placeholder="Input group" dir="auto" />
    </div>
  </label>
  <label class="pt-label pt-disabled">
    Label C
    <div class="pt-select pt-disabled">
      <select disabled>
        <option selected>Choose an item...</option>
        <option value="1">One</option>
      </select>
    </div>
  </label>

  Styleguide pt-label.pt-disabled
  */

  &.pt-disabled {
    &,
    .pt-text-muted {
      color: $pt-text-color-disabled;
    }
  }

  .pt-dark & {
    color: $pt-dark-heading-color;

    &.pt-disabled {
      &,
      .pt-text-muted {
        color: $pt-dark-text-color-disabled;
      }
    }
  }
}