/*
=========================================================
FORM OBJECTS CSS
=========================================================
 * Innehåller kundanpassad styling av formulär,
 * inmatningsfält, knappar et.c. utanför Envision
 *
 * Copyright (C) Limepark AB.
 * https://limepark.se/licensvillkor
=========================================================*/
/* stylelint-disable no-duplicate-selectors */

/*
---------------------------------------------------------
GENERELLA FORMULÄROBJEKT
--------------------------------------------------------- */

button {
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  margin: 0;
}

textarea {
  font-family: inherit;
}

input,
button:not(.lp-expandable-content__toggler),
textarea,
select,
.env-form-input,
.lp-search input[type='search'] {
  transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
}

input:focus,
button:not(.lp-expandable-content__toggler):not(.lp-app-submenu__menu-item__toggler):not(.lp-overlay-button):focus,
textarea:focus,
select:focus,
.env-form-input:focus,
.lp-search input[type='search']:focus {
  border-color: #3f4d09;
  box-shadow: 0 0 0 0.4rem rgb(100 122 15 / 30%);
  outline: none;
  z-index: 1;
}

/* Inputfält för filer */

.sv-defaultFormTheme input[type=file]::file-selector-button {
  background-color: transparent;
  border: 1px solid var(--lp-font-color);
  border-radius: var(--lp-border-radius);
  font-size: var(--lp-font-size-small);
  padding: 0.4em 0.6em;
  font-weight: 300;
  margin-right: 0.5em;
  transition: var(--lp-transition-default);
}

.sv-defaultFormTheme input[type=file]::file-selector-button:hover {
  cursor: pointer;
  background-color: #dedede;
}


/*
---------------------------------------------------------
FIXAR/FÖRBÄTTRINGAR
---------------------------------------------------------*/

.sv-defaultFormTheme input[type=submit]::-moz-focus-inner {
  border: 0; /* fix för felaktig höjd i Firefox */
  padding: 0;
}


/* Fixar för Envision */
.env-form textarea {
  font-family: inherit;
}

.env-form-radio__fake {
  top: 2px;
}

[type=radio]:checked + label .env-form-radio__fake:before {
  border-color: #6892d5;
  top: 0;
}

[type=checkbox]:checked + label .env-checkbox__fake:after {
  border-bottom: 4px solid #fff;
  border-left: 4px solid #fff;
  height: 0.35em;
  width: 0.6em;
}

.env-form-radio input[type='radio']:focus + .env-form-element__label .env-form-radio__label {
  text-decoration: underline;
}

.env-checkbox input[type='checkbox']:focus + .env-form-element__label .env-checkbox__label {
  text-decoration: underline;
}

/*
---------------------------------------------------------
DEFAULT FORM THEME - INMATNINGSFÄLT
--------------------------------------------------------- */

.sv-defaultFormTheme input[type=text],
.sv-defaultFormTheme input[type=email],
.sv-defaultFormTheme input[type=url],
.sv-defaultFormTheme input[type=tel],
.sv-defaultFormTheme input[type=number],
.sv-defaultFormTheme textarea,
.sv-defaultFormTheme select {
  background-color: #fff;
  border: 1px solid rgba(0,0,0,0.418);
  border-radius: 4px;
  box-shadow: none;
  font-size: 1.8rem;
  height: auto;
  line-height: 1.6 !important; /* Important skriver över SiteVision's styling */
  padding: 1rem 1.5rem;
  transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
  transition: none;

  -webkit-appearance: none;
}

.sv-defaultFormTheme input[type=text]:hover,
.sv-defaultFormTheme input[type=email]:hover,
.sv-defaultFormTheme input[type=url]:hover,
.sv-defaultFormTheme input[type=tel]:hover,
.sv-defaultFormTheme input[type=number]:hover,
.sv-defaultFormTheme textarea:hover,
.sv-defaultFormTheme select:hover {
  border-color: #3f4d09;
}

.sv-defaultFormTheme input[type=text]:focus,
.sv-defaultFormTheme input[type=email]:focus,
.sv-defaultFormTheme input[type=url]:focus,
.sv-defaultFormTheme input[type=tel]:focus,
.sv-defaultFormTheme input[type=number]:focus,
.sv-defaultFormTheme textarea:focus,
.sv-defaultFormTheme select:focus {
  /*samma utseende vid musklick som vid tabbning */
  border-color: #3f4d09;
  box-shadow: 0 0 0 0.4rem rgb(100 122 15 / 30%);
}


/*
---------------------------------------------------------
DEFAULT FORM THEME - KNAPPAR
--------------------------------------------------------- */

.sv-defaultFormTheme input[type=button],
.sv-defaultFormTheme input[type=submit],
.sv-defaultFormTheme input[type=reset] {
  background-color: #767676;
  border-color: #767676;
  border-radius: 4px;
  border-style: solid; /* sätts för att undvika konstig default i Chrome */
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 1.6;
  padding: 1rem 2rem;

  -webkit-appearance: none;
}

.sv-defaultFormTheme input[type=button]:hover,
.sv-defaultFormTheme input[type=submit]:hover,
.sv-defaultFormTheme input[type=reset]:hover,
.sv-defaultFormTheme input[type=button]:active,
.sv-defaultFormTheme input[type=submit]:active,
.sv-defaultFormTheme input[type=reset]:active {
  background-color: #222;
  border-color: #222;
  color: #fff;
}

.sv-defaultFormTheme input[type=button]:focus,
.sv-defaultFormTheme input[type=submit]:focus,
.sv-defaultFormTheme input[type=reset]:focus {
  background-color: #222;
  border-color: #222;
  color: #fff; /* samma utseende vid musklick som vid tabbning */
  outline: none;
}

/* Ikon för felmeddelande i formulär */

.sv-signup-portlet .sv-form-field-message > span[role='alert']:before,
.sv-form-portlet .sv-form-field-message > span[role='alert']:before,
.sv-signup-portlet .sv-form-userattributefield span[role='alert']:before,
.sv-form-portlet .sv-form-userattributefield span[role='alert']:before {
  background-color: var(--env-ui-color-status-error-text);
  content: '';
  display: inline-block;
  height: 1.2em;
  margin-bottom: -4px;
  margin-right: 0.3em;
  width: 1.2em;

  -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20aria-hidden%3D%22true%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203.03c-.563%200-1.126.262-1.441.786L1.762%2018.451C1.113%2019.53%201.942%2021%203.202%2021h17.595c1.258%200%202.09-1.47%201.441-2.549L13.441%203.816c-.315-.524-.878-.787-1.441-.787zm0%202.269L20.236%2019H3.764L12%205.299zM11%209v5h2V9h-2zm0%207v2h2v-2h-2z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
  mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20aria-hidden%3D%22true%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203.03c-.563%200-1.126.262-1.441.786L1.762%2018.451C1.113%2019.53%201.942%2021%203.202%2021h17.595c1.258%200%202.09-1.47%201.441-2.549L13.441%203.816c-.315-.524-.878-.787-1.441-.787zm0%202.269L20.236%2019H3.764L12%205.299zM11%209v5h2V9h-2zm0%207v2h2v-2h-2z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/*
---------------------------------------------------------
DATUMFÄLT
--------------------------------------------------------- */

input[type='date'] {
  min-width: 0; /* Fix för Safari i mobil */
  width: -webkit-fill-available; /* Fix för Safari i mobil */
  max-width: 100%;
}

input[type='date']::-webkit-date-and-time-value {
  text-align: left;
}