@charset "utf-8";
// Copyright 2019, Oath Inc.
// Licensed under the terms of the MIT license. See LICENSE file in project root for terms.

@import '../maps/color-maps.scss';
@import '../utilities/global-variables.scss';

$fields-corner-radius: $border-radius-sm !default;
$fields-dropdown-arrow-color: "black" !default;
$fields-padding: 0px 10px !default;

$fields-placeholder-text-color: rgba(map-get($denali-grey-colors,"800"), 0.6) !default;
$fields-default-bg: rgba(map-get($denali-brand-colors,"300"), 0.08) !default;
$fields-default-text-color: map-get($denali-grey-colors,"800") !default;
$fields-default-border: none !default;
$fields-focus-border: inset 0 -2px rgba(map-get($denali-brand-colors,"300"), 1) !default;
$fields-disabled-bg: rgba(map-get($denali-grey-colors,"800"), 0.05) !default;
$fields-disabled-text-color: rgba(map-get($denali-grey-colors,"800"), 0.25) !default;
$fields-disabled-border: inset 0 -2px rgba(map-get($denali-grey-colors,"800"), 0.05) !default;
$fields-error-border: inset 0 -2px map-get($denali-status-colors,"danger") !default;

$fields-sizes-default-width: 250px !default;
$fields-sizes-sm-height: 24px !default;
$fields-sizes-md-height: 32px !default; 
$fields-sizes-default-height: 36px !default;
$fields-sizes-lg-height: 44px !default;

@mixin inputs-default {
  .input {
    position: relative;
    z-index: 0;

    input,
    textarea {
      margin: 0;
      appearance: none;
      border: none;
      box-shadow: none;
      flex: 1 0 auto;
      font: inherit;
      outline: none;
      text-align: left;
      padding: $fields-padding;
      width: inherit;

      &:active,
      &:focus {
        transition: 300ms;
      }
    }
  }

  .input {
    display: flex;
    flex-wrap: wrap;
    width: $fields-sizes-default-width;

    &.is-full {
      width: 100% !important;
    }

    input {
      height: $fields-sizes-default-height;
    }

    textarea {
      padding-top: 6px;
      max-width: 100%;
      min-height: 90px;
    }

    input,
    textarea {
      background: $fields-default-bg;
      border-radius: $fields-corner-radius;
      color: $fields-default-text-color;
      box-shadow: $fields-default-border;

      &:active,
      &:focus {
        box-shadow: $fields-focus-border;
      }

      &::placeholder {
        color: $fields-placeholder-text-color;
      }

      &[disabled] {
        background: $fields-disabled-bg;
        color: $fields-disabled-text-color;
        box-shadow: $fields-disabled-border;
        &::placeholder {
          color: $fields-placeholder-text-color;
        }
      }
    }

    // States
    &.is-active > input,
    &.is-active > textarea {
      box-shadow: $fields-focus-border;
    }

    &.is-disabled > input,
    &.is-disabled > textarea {
      background: $fields-disabled-bg;
      color: $fields-disabled-text-color;
      box-shadow: $fields-disabled-border;
    }

    &.is-error > input,
    input:invalid,
    &.is-error > textarea,
    textarea:invalid {
      box-shadow: $fields-error-border;
    }

    // Sizes
    &.is-large > input{
      height: $fields-sizes-lg-height;
    }
    &.is-medium > input{
      height: $fields-sizes-md-height;
    }
    &.is-small > input{
      height: $fields-sizes-sm-height;
    }

    // Dark State
    &.is-inverse {
      input {
        background: rgba(138, 197, 237, 0.10);
        color: map-get($denali-grey-colors,"100");
      }
      input:active {
        border-bottom: 2px solid rgba(map-get($denali-brand-colors,"400"), 1);
        color: map-get($denali-grey-colors,"100");
      }
      input::placeholder {
        color: rgba(map-get($denali-grey-colors,"100"), 0.5);
      }
      label {
        color: map-get($denali-grey-colors,"100");
      }
    }

    // Message under input
    .message {
      width: inherit;
      font-size: 11px !important;
      font-weight: normal;
      line-height: 1.6rem;
      margin-top: 2px;
    }
    &.is-error > .message {
      color: map-get($denali-status-colors,"danger");
    }
  }

  // Input with icon
  .input.has-icon-back {
    > * {
      float: left;
    }
    input {
      padding-right: 34px;
    }
    .d-icon {
      align-items: center;
      display: flex;
      font-size: 1.8rem !important;
      pointer-events: none;
      &::before {
        position: absolute;
        right: 10px;
      }
    }
  }

  .input.has-icon-front {
    > * {
      float: left;
    }
    input {
      padding-left: 34px;
    }
    .d-icon {
      align-items: center;
      display: flex;
      font-size: 1.8rem !important;
      &::before {
        position: absolute;
        left: 10px;
      }
    }

    &.has-icon-back {
      .d-icon:first-child::before {
        left: 10px;
        right: unset;
      }
      .d-icon:last-child::before {
        left: unset;
        right: 10px;
      }
    }
  }

  // Input with button
  .input-group.has-button {
    input {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }
    button.button {
      margin: 0px;
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
    }
  }

  // Input with dropdown
  .input-group.has-dropdown {
    .input {
      min-width: 0px;
      width: auto;
      input {
        min-width: 250px;
        border-radius: 0px;
      }
      select {
        width: inherit;
        padding-right: 34px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
      }
    }
  }
}

@mixin inputs-theme {
  .input {
    width: $fields-sizes-default-width;

    input {
      height: $fields-sizes-default-height;
    }

    input,
    textarea {
      background: $fields-default-bg;
      border-radius: $fields-corner-radius;
      color: $fields-default-text-color;
      box-shadow: $fields-default-border;
      padding: $fields-padding;

      &:active,
      &:focus {
        box-shadow: $fields-focus-border;
      }

      &::placeholder {
        color: $fields-placeholder-text-color;
      }

      &[disabled] {
        background: $fields-disabled-bg;
        color: $fields-disabled-text-color;
        box-shadow: $fields-disabled-border;

        &::placeholder {
          color: $fields-placeholder-text-color;
        }
      }
    }

    // States
    &.is-active>input,
    &.is-active>textarea {
      box-shadow: $fields-focus-border;
    }

    &.is-disabled>input,
    &.is-disabled>textarea {
      background: $fields-disabled-bg;
      color: $fields-disabled-text-color;
      box-shadow: $fields-disabled-border;
    }

    &.is-error>input,
    input:invalid,
    &.is-error>textarea,
    textarea:invalid {
      box-shadow: $fields-error-border;
    }

    // Sizes
    &.is-medium>input {
      height: $fields-sizes-md-height;
    }

    &.is-small>input {
      height: $fields-sizes-sm-height;
    }
  }
}