@use "sass:math";

@use "sass:color";
@use "colors";
@use "helpers";
@use "mixins";
@use "variables";

/* =Forms
-----------------------------------------------------------------------------*/
.form  {
  .btn,
  input[type="submit"].btn,
  button,
  input[type="submit"],
  input[type="reset"] {
    padding: variables.$padding-btn-in-forms;

    &.btn-outline, {
      padding: variables.$padding-btn-outline-in-forms;
    }
    &.btn-outline.bold {
      padding: variables.$padding-btn-outline-bold-in-forms;
    }
  }

  label {
    cursor: pointer;

    display: block;
    margin-bottom: 0.25rem;

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="url"],
    input[type="phone"],
    input[type="tel"],
    input[type="number"],
    input[type="datetime"],
    input[type="date"],
    input[type="month"],
    input[type="color"],
    input[type="time"],
    input[type="search"],
    input[type="range"],
    input[type="file"],
    input[type="datetime-local"],
    textarea,
    select {
      margin-top: variables.$margin;
      width: 100%;
    }
  }

  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="url"],
  input[type="phone"],
  input[type="tel"],
  input[type="number"],
  input[type="datetime"],
  input[type="date"],
  input[type="month"],
  input[type="color"],
  input[type="time"],
  input[type="search"],
  input[type="range"],
  input[type="file"],
  input[type="datetime-local"],
  textarea,
  select {
    border-radius: var(--ply-border-radius);
    display: block;
    width: 100%;
    font-size: var(--ply-control-font);
    line-height: var(--ply-control-lh);
    padding: var(--ply-control-py) var(--ply-control-px);
  }
}

.form-inline,
.form-inline-list {
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="url"],
  input[type="phone"],
  input[type="tel"],
  input[type="number"],
  input[type="datetime"],
  input[type="date"],
  input[type="month"],
  input[type="color"],
  input[type="time"],
  input[type="search"],
  input[type="range"],
  input[type="file"],
  input[type="datetime-local"],
  textarea,
  select {
    display: inline-block;
  }
}

.form-list,
.form-inline,
.form-inline-list {
  margin: 0;
  padding: 0;
  margin-bottom: math.div(variables.$base-line, 1.5);
  list-style: none;

  label,
  li,
  li label {
    display: inline-block;
    margin-bottom: 0;
  }
}

.form-inline-list {
  li {
    margin-bottom: 3px;

    label {
      margin-right: variables.$base-line * 0.5;
    }
  }
}

.form-list {
  li {
    margin-bottom: 6px;
  }
}

.form-desc {
  margin-top: 4px;
  color: var(--ply-color-muted, rgba(0, 0, 0, .4));
  font-size: variables.$font-size-small;
  line-height: 1.4em;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="phone"],
input[type="tel"],
input[type="number"],
input[type="datetime"],
input[type="date"],
input[type="month"],
input[type="color"],
input[type="time"],
input[type="search"],
input[type="datetime-local"],
textarea {
  @include mixins.transition(border ease .5s);
}

// Fieldset
fieldset {
  border-radius: var(--ply-border-radius);

  background-color: var(--ply-bg-surface);
  padding: variables.$base-line;
  margin-bottom: variables.$base-line;
  border: 1px solid var(--ply-border-color);

  *:last-child {
    margin-bottom: 0;
  }
}

/* States */
.error,
.success {
  font-weight: bold;
  font-size: variables.$font-size-small;
}

input.input-error,
textarea.input-error,
select.input-error,
.input-error {
  border-color: var(--ply-color-error);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ply-color-error) 30%, transparent), 0 1px 2px rgba(0, 0, 0, .2) inset;
}

input.input-success,
textarea.input-success,
select.input-success,
.input-success {
  border-color: var(--ply-color-success);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ply-color-success) 30%, transparent), 0 1px 2px rgba(0, 0, 0, .2) inset;
}

input.input-gray,
textarea.input-gray,
select.input-gray,
.input-gray {
  border-color: colors.$color-gray-dark;
  box-shadow: 0 0 0 2px rgba(color.channel(colors.$color-gray-dark, "red", $space: rgb), color.channel(colors.$color-gray-dark, "green", $space: rgb), color.channel(colors.$color-gray-dark, "blue", $space: rgb), .4), 0 1px 2px rgba(0, 0, 0, .2) inset;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="phone"],
input[type="tel"],
input[type="number"],
input[type="datetime"],
input[type="date"],
input[type="month"],
input[type="color"],
input[type="time"],
input[type="search"],
input[type="datetime-local"],
textarea {
  &:focus-visible {
    outline: none;
    border-color: colors.$color-blue;
    box-shadow: 0 0 0 2px rgba(color.channel(colors.$color-blue, "red", $space: rgb), color.channel(colors.$color-blue, "green", $space: rgb), color.channel(colors.$color-blue, "blue", $space: rgb), .3), 0 1px 2px rgba(0, 0, 0, .2) inset;
  }
}

/*
  Search
*/
input.input-search,
input[type="search"] {
  padding-right: .5em;
  padding-left: .5em;
  margin-bottom: 0;
  border-radius: 15px;
}

input.input-on-black {
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .35);

  &::-webkit-input-placeholder {
    color: rgba(255, 255, 255, .6);
  }

  &::-moz-placeholder {
    color: rgba(255, 255, 255, .6);
  }

  &:focus,
  &.active {
    border: 1px solid #fff;
    background: #fff;
    box-shadow: none;

    &::-webkit-input-placeholder {
      color: #aaa;
    }
    &::-moz-placeholder {
      color: #aaa;
    }
  }
}

/* Sizes — share the control sizing scale with buttons so a given size is the
   same height across inputs, buttons, selects and textareas */
.form .input-lg,
input.input-lg[type],
textarea.input-lg,
select.input-lg {
  font-size: var(--ply-control-font-lg);
  line-height: var(--ply-control-lh-lg);
  padding: var(--ply-control-py-lg) var(--ply-control-px-lg);
}

.form .input-sm,
input.input-sm[type],
textarea.input-sm,
select.input-sm {
  font-size: var(--ply-control-font-sm);
  line-height: var(--ply-control-lh-sm);
  padding: var(--ply-control-py-sm) var(--ply-control-px-sm);
}

.form .input-xs,
input.input-xs[type],
textarea.input-xs,
select.input-xs {
  font-size: var(--ply-control-font-xs);
  line-height: var(--ply-control-lh-xs);
  padding: var(--ply-control-py-xs) var(--ply-control-px-xs);
}

/* Append & Prepend */
.input-groups {
  display: flex !important;
  align-items: stretch;
  margin-bottom: variables.$base-line;

  .btn {
    &:hover,
    &:active {
      transform: none;
    }
  }

  input,
  textarea,
  select {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    display: block !important;
    margin-bottom: 0;
    border-radius: var(--ply-border-radius);
  }

  // Zero out joining edges
  input:not(:last-child),
  textarea:not(:last-child),
  select:not(:last-child) {
    border-right: none;
    border-radius: var(--ply-border-radius) 0 0 var(--ply-border-radius);
  }

  input:not(:first-child),
  textarea:not(:first-child),
  select:not(:first-child) {
    border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;
  }

  // Middle element (both prepend and append)
  input:not(:first-child, :last-child),
  textarea:not(:first-child, :last-child),
  select:not(:first-child, :last-child) {
    border-radius: 0;
  }

  .input-append,
  .input-prepend {
    display: flex;
    align-items: center;
    background-color: var(--ply-bg-surface-alt);
    border: 1px solid var(--ply-color-input-border);
    margin: 0;
    padding: 0 0.75rem;
    color: var(--ply-color-secondary, rgba(0, 0, 0, .6));
    line-height: variables.$base-line;
    font-size: variables.$font-size-small;
    white-space: nowrap;
  }

  .input-prepend {
    border-right: none;
    border-radius: var(--ply-border-radius) 0 0 var(--ply-border-radius);
  }

  .input-append {
    border-left: none;
    border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;

    &:has(.btn) {
      padding: 0;
      border: none;
    }

    .btn {
      display: flex;
      align-items: center;
      border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;
      margin: 0;
      border-left: none;
      white-space: nowrap;

      &[class*="outline"] {
        border: 1px solid var(--ply-color-input-border);
        border-left: none;
      }
    }
  }

  .btn-append {
    display: flex;
    align-items: stretch;
    margin: 0;

    .btn {
      display: flex;
      align-items: center;
      border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;
      margin: 0;
      white-space: nowrap;

      &[class*="outline"] {
        border: 1px solid var(--ply-color-input-border);
        border-left: none;
      }
    }
  }
}

// Select — the native dropdown / picker for choosing one option from a list
.form select {
  appearance: none;
  background-color: var(--ply-color-input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23525252' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 0.75em;
  padding: 0.5em 2.5em 0.5em 0.75em;
  font-size: 1em;
  line-height: variables.$base-line;
  border: 1px solid var(--ply-color-input-border);
  color: var(--ply-color-body);
  cursor: pointer;

  &:focus-visible {
    outline: none;
    border-color: var(--ply-color-focus, colors.$color-blue);
    box-shadow: 0 0 0 2px rgba(15, 98, 254, 0.3);
  }
}

/* Select — outlined */
.form select.select-outlined,
select.select-outlined {
  appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23525252' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 0.75em;
  padding: 0.5em 2.5em 0.5em 0.75em;
  border: 1px solid var(--ply-border-strong, colors.$color-neutral-300);
  border-radius: var(--ply-border-radius);
  color: var(--ply-color-body);
  font-size: 1em;
  line-height: variables.$base-line;
  cursor: pointer;
  width: 100%;
  display: block;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;

  &:hover {
    border-color: var(--ply-color-body);
  }

  &:focus-visible {
    outline: none;
    border-color: var(--ply-color-focus, colors.$color-blue);
    box-shadow: 0 0 0 1px var(--ply-color-focus, colors.$color-blue);
  }
}