/* input design */
.placeholder,
::placeholder {
  color: var(--color-input, rgba($pm-global-grey, .65));
  font-style: normal;
  opacity: .6;
}

// fix "autofill state"
input:-webkit-autofill{
  box-shadow: 200px 200px 100px var(--bgcolor-input, $pm-input-background) inset;
}

/* removes X in input when typing in IE/EDGE */
input::-ms-clear {
  width: 0;
  height: 0;
}
/* removes native password revealer for IE/EDGE */
input::-ms-reveal {
  display: none;
}

$field-container: 26rem !default;
.pm-field-container {
  width: $field-container;
  @extend .mw100;
  @extend .inbl;
  @extend .relative;
  &.auto {
    @extend .auto;
  }
}

.pm-field {
  filter: none; // fixes Firefox autofill color
  border: 1px solid var(--bordercolor-input, $input-defaut-border);
  padding: em(6) em(16); // design want 34px height (actually 35 to avoid .5px)
  background-color: var(--bgcolor-input, $pm-input-background);
  border-radius: $global-border-radius;
  color: var(--color-input, $pm-global-grey);
  outline: 0;
  height: $default-height-fields;
  &.pm-field--tiny,
  &.pm-field--small,
  &.pm-field--large {
    height: auto;
  }
  &:focus,
  &.focus,
  &:focus-within {
    background-color: var(--bgcolor-main-area, $white);
    box-shadow: 0 0 10px 0 $input-shadow-color;
  }
  &[aria-invalid="true"]:not(:focus),
  &[aria-invalid="true"]:not(.ng-pristine) {
    border-color: $pm-global-warning;
    box-shadow: none;
  }
  &.is-valid:not(:focus) {
    border-color: $pm-global-success;
  }
  &[disabled] {
    color: rgba( $pm-global-grey, .3 );
  }
  &.w100 {
    width: 100%;
  }
  &.wauto {
    width: auto;
  }
  &:-moz-ui-invalid { // fixes some Firefox issues with HTML5 validation
    box-shadow: none;
  }

  &[type="search"] {
    background: url("#{$path-images}sprite-for-css-only.svg#css-search") 6px 50% no-repeat;
    background-size: 1.5rem;
    padding-left: 2em;
    &::-webkit-search-cancel-button {
      display: none;
    }
  }

  &[type="number"] {
      padding-right: .25em;
  }
}
@if $rtl-option == true {
  [dir="rtl"] {
    [type="search"].pm-field {
      padding-left: 0;
      padding-right: 2em;
      background: url("#{$path-images}sprite-for-css-only.svg#css-search-rtl") calc(100% - 6px) 50% no-repeat;
    }
  }
}

select.pm-field {
  background: var(--bgcolor-input, $pm-input-background) url("#{$path-images}sprite-for-css-only.svg#css-caret") calc(100% - 6px) 50% no-repeat;
  background-size: 1.5rem;
  padding-left: 1em;
  padding-right: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  &::-ms-expand {
    display: none;
  }
  > optgroup {
	background-color: var(--bgcolor-highlight, $pm-global-light);
  }
  &.pm-field--linkSelect {
		border: 1px solid transparent;
		padding-left: 0;
		width: auto;
		color: $pm-primary;
		padding-right: 2.5rem;
		@if ($pm-primary == $pm-blue) {
			background-image: url("#{$path-images}sprite-for-css-only.svg#css-caret-primary-blue");
		}
		@else {
			background-image: url("#{$path-images}sprite-for-css-only.svg#css-caret-primary-green");
		}
		&,
		&:focus,
		&.focus,
		&:focus-within,
		&:hover {
			background-color: transparent;
			box-shadow: none;
		}
		&:focus,
		&.focus,
		&:focus-within,
		&:hover {
			background-image: url("#{$path-images}sprite-for-css-only.svg#css-caret");
			border-color: transparent;
			text-decoration: underline;
			color: $color-hover;
		}

		> * {
			color: $pm-primary;
		}
  }
}


textarea {
	min-height: $default-height-fields; // Equals pm-field inputs height
	&.pm-field {
		height: auto;
	}
}

/* firefox bug */
textarea[required].pm-field.field-pristine:invalid {
  box-shadow: none;
}

@if $rtl-option == true {
  [dir="rtl"] {
    select.pm-field {
      background-position: 6px 50%;
      padding-right: 1em;
      padding-left: 20px;
    }
  }
}

/* errors */
.error-zone {
  transition: transform .15s linear, max-height .15s linear;
  transform: scaleY(1);
  transform-origin: top center;
  &:empty {
    transform: scaleY(0);
  }
}

// general rule: if focus is on the field => don't display error yet
.pm-field-icon-container:focus-within + .error-zone,
.pm-field:focus + .error-zone {
  transform: scaleY(0);
  max-height: 0;
}




/* sizes/other modifiers */
.pm-field--tiny {
  padding: em(6); // useful for address group
}
.pm-field--small {
  padding: em(2) em(16);  // design want 26px height (actually 27 to avoid .5px)
}
.pm-field--large {
  padding: em(10) em(16); // design want 42px height (actually 43 to avoid .5px)
}
.pm-field--highlight {
  border-color: $pm-primary;
  border-width: 2px;
  background-color: rgba($pm-primary, .1);
}

/* checkboxes */
.pm-checkbox-fakecheck {
  display: inline-flex;
  border: 1px solid var(--bordercolor-input, $pm-global-border);
  border-radius: 2px;
  min-width: 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
  margin: auto .5rem auto 0;
}
.item-icon-compact .pm-checkbox-fakecheck {
  margin: auto;
  background: var(--bgcolor-input, $white);
}
.pm-checkbox-fakecheck-img {
  margin: auto;
  width: 1rem;
  transform: scale(0);
  transition: .15s transform linear;
}
.pm-checkbox {
  @extend .sr-only;
  &:checked + .pm-checkbox-fakecheck {
    .pm-checkbox-fakecheck-img {
      transform: scale(1);
    }
  }
  &:focus + .pm-checkbox-fakecheck {
    box-shadow: 0 0 10px 0 $input-shadow-color;
  }
  &[disabled] + .pm-checkbox-fakecheck,
  &:indeterminate + .pm-checkbox-fakecheck {
    background: var(--bgcolor-disabled-checkboxes-radios, $pm-global-muted);
  }
  &:indeterminate + .pm-checkbox-fakecheck {
      content: '';
      width: 1.6rem;
      height: 1.6rem;
      background-image: url("#{$path-images}sprite-for-css-only.svg#css-dash");
      background-repeat: no-repeat;
  }
}

// exception for toolbar
.pm-select-all {
  .pm-checkbox-fakecheck {
    border: 1px solid #585C67;
    background-color: var(--bgcolor-aside-link, #484E59);
  }
  .pm-checkbox-fakecheck-img {
    fill: var(--fillcolor-icons, $white);
  }
}


/* radios */
.pm-radio-fakeradio {
  @extend .pm-checkbox-fakecheck;
  border-radius: 50%;
}
.pm-radio--onTop .pm-radio-fakeradio {
  margin-top: .25em;
}

.pm-radio-fakeradio::before {
  content: '';
  margin: auto;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: transparent;
  transform: scale(0);
  transition: .15s transform linear;
}

.pm-radio {
  @extend .sr-only;
  &:checked + .pm-radio-fakeradio::before {
    background: $pm-primary;
    transform: scale(1);
  }
  &:focus + .pm-radio-fakeradio {
    box-shadow: 0 0 10px 0 $input-shadow-color;
  }
  &[disabled] + .pm-radio-fakeradio {
    background: var(--bgcolor-disabled-checkboxes-radios, $pm-global-muted);
  }
}


/* toggle */
$width: 5.5em !default;
.pm-toggle-label {
  margin-top: .15em;
  // height: 2em;
  width: $width;
  display: inline-flex;
  border: 1px solid var(--bordercolor-input, $pm-global-border);
  background: var(--bgcolor-view-column-detail, $pm-input-background);
  border-radius: 2rem;
  padding: 2px;
  position: relative;
  transition: border-color .15s ease-out;
  &::before {
    content: '';
    position: absolute;
    width: calc( #{$width/2} - 2px);
    transition: transform .25s ease, background-color .25s ease, border-color .25s linear;
    border-radius: 2rem;
    background: var(--bgcolor-context-bar, $pm-global-muted);
    top: 2px;
    left: 0;
    bottom: 2px;
    transform: translateX(2px);
    border: 1px solid var(--bordercolor-input, $pm-global-border);
  }
  & > .pm-toggle-label-text {
    align-self: center;
    margin: 0;
    text-align: center;
    border-radius: 2rem;
    padding: em(6) 0;
    width: #{$width/2};
    position: relative;
    z-index: 2;
    display: inline-flex;
    & .pm-toggle-label-img {
      transition: fill .1s steps(1, end);
    }
  }
}
@if $rtl-option == true {
  [dir="rtl"] {
    .pm-toggle-label {
      &::before {
        left: auto;
        right: 0;
        transform: translateX(-2px);
      }
    }
  }
}

.pm-toggle-label-img {
  margin: auto;
  width: 1.6rem;
  height: 1.6rem;
  fill: var(--bordercolor-input, $black);
  .pm-toggle-label--theme-toggle & {
    fill: black;
  }
}

// checked state
.pm-toggle-checkbox {
  @extend .invisible;
  &:checked + .pm-toggle-label {
    & > .pm-toggle-label-text:first-child .pm-toggle-label-img {
      fill: var(--bordercolor-input, $black);
    }
    & > .pm-toggle-label-text:last-child .pm-toggle-label-img {
      fill: $white;
    }
    &::before {
      background: $pm-primary;
      transform: translateX( #{$width/2} ) translateX(-2px);
      // transform: translateX( calc( 2.5rem - 2px) ); does NOT work in IE11
      border-color: $pm-primary-dark;
    }
  }
  &:checked + .pm-toggle-label--theme-toggle { // Theme toggle inside user dropdown
    & > .pm-toggle-label-text:last-child .pm-toggle-label-img {
      fill: #fce988;
    }
    &::before {
      background: rgba(black, .75);
      border-color: rgba(white, .25);
    }
  }
  &:focus + .pm-toggle-label {
    box-shadow: 0 0 10px 0 $input-shadow-color;
  }
  &[disabled] + .pm-toggle-label  {
    background: rgba($pm-global-muted, .6);
    .pm-toggle-label-text {
      opacity: .3;
    }
  }
  &[aria-busy="true"] + .pm-toggle-label  {
    border-color: $pm-global-border;
    &::before {
      border-color: transparent;
      transform: translateX( #{$width/4} ) translateX(-2px);
      background: transparent url(#{$path-images}loading-atom-smaller.svg) 50% 50% no-repeat;
    }
    & > .pm-toggle-label-text {
      opacity: 0;
    }
  }

}
@if $rtl-option == true {
  [dir="rtl"] {
    .pm-toggle-checkbox {
      &:checked + .pm-toggle-label {
        &::before {
          transform: translateX( -#{$width/2} ) translateX(2px);
        }
      }
      &[aria-busy="true"] + .pm-toggle-label  {
        &::before {
          //background-color: $pm-primary;
          transform: translateX( -#{$width/4} ) translateX(2px);
        }
      }
    }
  }
}


.pm-toggle-label--small {
  margin-top: .25em;
  font-size: .8em;
  & .pm-toggle-label-img {
    width: 1.3rem;
    height: 1.3rem;
  }
}



/* label */
// $pm-label-width defined in global vars
.pm-label {
  padding-top: .5em;
  width: var(--label-width, $pm-label-width);
  padding-right: .5em;
  max-width: 100%;
  flex-shrink: 0;
  &.pt0 {
    padding-top: 0;
  }
  &.auto {
    width: auto;
  }
  &--small {
    font-size: 1.2rem;
    line-height: 2;
  }
}

// case for forms labelled only with icons (calendar popover, etc.)
$pm-label-icon-width: 2.4em !default;
.pm-form--iconLabels .pm-label {
  width: $pm-label-icon-width;
}

/* container address */
.pm-field-container--address {
  margin-top: -1.6em;
}


/* field with icon */
.pm-field-icon-container {
  @extend .pm-field; // added focus-within inside on pm-field for this fake-field :)
  min-height: calc(#{$default-height-fields} + 2px);
  padding: 0;
  > .pm-field {
    border: 0;
    width: calc(100% - 1.5em);
  }
  &:focus-within {
    > .pm-field {
      background-color: transparent;
      box-shadow: none;
      outline: 0;
    }
  }
}
.pm-field-icon-container--invalid:not(:focus-within) {
  border-color: $pm-global-warning;
  > .pm-field {
    border-color: $pm-global-warning;
  }
}

/* @protonmail.com field */
.pm-field--username,
.signLayout-container .pm-field--username.pm-field--username {
	padding-right: var(--padding-right-field-above, 9em);
}


/* special case for very large inputs in modals, like rich text editor */
.pm-modalContainer .pm-field-container--full {
  width: calc(100% - var(--label-width, #{$pm-label-width}));
}
@include respond-to(1360) {
  .pm-modalContainer .pm-field-container--full {
      width: $field-container;
  }
}
@include respond-to(830) {
  .pm-modalContainer .pm-field-container--full {
      width: calc(100% - var(--label-width, #{$pm-label-width}));
  }
}

@include respond-to($breakpoint-small) {
  .pm-modalContainer .pm-field-container--full {
      width: 100%;
  }
}
/* end special case */


/* special stupid case for signup iframe challenge... not using same styles for the moment */
.signLayout-container {
	.pm-field--username {
        padding: em(10) em(16); // design want 42px height (actually 41 to avoid .5px)
    }
}