// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

// TODO: These are legacy Sass vars that are now only used in this file.
//       We should switch them for the new DS tokens.
$color-gray-40: #64666a;
$color-gray-60: #1f1f1f;
$size-4: 1rem;
$br7: 7px;
$br25: 25px;
$br50: 50px;

input[type="button"][disabled] {
  background-color: var(--color-canvas); // TODO: see if we can remove this whole selector
  color: $color-gray-40;
  pointer-events: none;
}

input,
select {
  box-sizing: border-box;
  font-family: "worksans", sans-serif;
  font-size: $fs14;
  margin-bottom: $size-4;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  cursor: pointer;
  line-height: $lh-normal;
  margin-top: 1px 0 0;
}

.form-errors {
  color: var(--status-color-warning-500);
}

// Input slidebar

input[type="range"] {
  background-color: transparent;
  -webkit-appearance: none;
  margin: 10px 0 10px 3px;
  max-width: 70px;
  width: 100%;
}
input[type="range"]:focus {
  outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow:
    0px 0px 0px #000000,
    0px 0px 0px #0d0d0d;
  background: $color-gray-60;
  border-radius: $br25;
  border: 0px solid #000101;
}
input[type="range"]::-webkit-slider-thumb {
  box-shadow:
    0px 0px 0px #000000,
    0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 18px;
  width: 6px;
  border-radius: $br7;
  background: $color-gray-20;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6px;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
  background: $color-gray-60;
}
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow:
    0px 0px 0px #000000,
    0px 0px 0px #0d0d0d;
  background: $color-gray-60;
  border-radius: $br25;
  border: 0px solid #000101;
}
input[type="range"]::-moz-range-thumb {
  box-shadow:
    0px 0px 0px #000000,
    0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 24px;
  width: 8px;
  border-radius: $br7;
  background: $color-gray-20;
  cursor: pointer;
}
input[type="range"]::-ms-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type="range"]::-ms-fill-lower {
  background: $color-gray-60;
  border: 0px solid #000101;
  border-radius: $br50;
  box-shadow:
    0px 0px 0px #000000,
    0px 0px 0px #0d0d0d;
}
input[type="range"]::-ms-fill-upper {
  background: $color-gray-60;
  border: 0px solid #000101;
  border-radius: $br50;
  box-shadow:
    0px 0px 0px #000000,
    0px 0px 0px #0d0d0d;
}
input[type="range"]::-ms-thumb {
  box-shadow:
    0px 0px 0px #000000,
    0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 24px;
  width: 8px;
  border-radius: $br7;
  background: $color-gray-20;
  cursor: pointer;
}
input[type="range"]:focus::-ms-fill-lower {
  background: $color-gray-60;
}
input[type="range"]:focus::-ms-fill-upper {
  background: $color-gray-60;
}

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}