/*
  Storeblocks Input component
  Loosely grabbed from
  https://github.com/storeblocks/storeblocks-ng/blob/main/packages/form/src/lib/form.component.scss
  2023-04-11
*/

/*
Usage:

Use either input tag, select tag or textarea tag, not a combination.

div.stb-input tag supports the following classes:
* small/medium/large/flex - specify width
* success - indicate input is correct
* invalid - indicate input is invalid
* disabled - indicate disabled input, also requires attribute [disabled]="disabled" on input tag

HTML:

<div class="stb-input stb-form-wrapper large">
  <div class="label">
    <label class="label-text" for="email">
      E-postadresse
    </label>
  </div>

  <div class="hint-container">
    <p class="hint-content">
      Det er viktig å oppgi e-postadresse
    </p>
  </div>

  <div class="input">
    <input id="email" name="email" type="text" value="" />
    <select id="email" name="email">
      <option value="" disabled selected hidden>Velg e-post</option>
      <option value="1">First email</option>
      <option value="2">Second email</option>
    </select>
    <textarea id="email" name="email"></textarea>
  </div>

  <div class="icon-sign-container">
    <div class="inline-icon">
      <i class="icon-xsmall">alert</i>
    </div>
  </div>


  <span class="validation-message">
    <div class="icon-wrapper">
      <i class="icon-medium"></i>
    </div>
    <span class="error">E-postadressen må fylles ut korrekt</span>
  </span>
</div>
*/

.hint-container .hint-content {
  margin: 5px 0 13px;
  line-height: 24px;
  font-size: 14px;
}

.stb-input.stb-form-wrapper {
    margin: 0px 0px 24px 0;
}

.stb-input.stb-form-wrapper.small .hint-content,
.stb-input.stb-form-wrapper.small .validation-message,
.stb-input.stb-form-wrapper.small .input input,
.stb-input.stb-form-wrapper.small .input select,
.stb-input.stb-form-wrapper.small .input textarea {
  width: 96px;
}

.stb-input.stb-form-wrapper.medium .hint-content,
.stb-input.stb-form-wrapper.medium .validation-message,
.stb-input.stb-form-wrapper.medium .input input,
.stb-input.stb-form-wrapper.medium .input select,
.stb-input.stb-form-wrapper.medium .input textarea {
  width: 148px;
}

.stb-input.stb-form-wrapper.large .hint-content,
.stb-input.stb-form-wrapper.large .validation-message,
.stb-input.stb-form-wrapper.large .input input,
.stb-input.stb-form-wrapper.large .input select,
.stb-input.stb-form-wrapper.large .input textarea {
  width: 288px;
}

@media (max-width: 350px) {
  .stb-input.stb-form-wrapper.large .hint-content,
  .stb-input.stb-form-wrapper.large .validation-message,
  .stb-input.stb-form-wrapper.large .input input,
  .stb-input.stb-form-wrapper.large .input select,
  .stb-input.stb-form-wrapper.large .input textarea {
    width: calc(100% - 40px);
  }
}

.stb-input.stb-form-wrapper.flex .input input,
.stb-input.stb-form-wrapper.flex .input select,
.stb-input.stb-form-wrapper.flex .input textarea {
  width: 100%;
}
.stb-input.stb-form-wrapper.flex .input input,
.stb-input.stb-form-wrapper.flex .input select,
.stb-input.stb-form-wrapper.flex .input textarea {
  flex-grow: 1;
}

/* focus-visible w/fallback */
.stb-form-wrapper:focus {
  outline: 2px solid var(--color-selection);
}
.stb-form-wrapper:focus:not(:focus-visible) {
  outline: 0;
}
.stb-form-wrapper:focus-visible {
  outline: 2px solid var(--color-selection);
}

.stb-input .label-text {
  display: inline-block;
  margin-bottom: 3px;
  font-weight: 600;
  color: var(--color-on-background);
  line-height: 16px;
}

.stb-input.disabled .label-text,
.stb-input.disabled .hint-content {
  color: var(--color-disabled);
}

/* Position info-icon for popover (if it exists) nicely to the right of the label */
.stb-input .label stb-popover {
  display: inline-block;
  position: relative;
  top: 2px;
  left: 0.5rem;
}

.stb-input div.input {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 9px;
}

.stb-input input,
.stb-input select,
.stb-input textarea {
  padding: 0px 8px;
  border: 1px solid var(--color-on-background);
  border-radius: 2px;
  color: var(--color-on-background);
  height: 38px;
  box-sizing: border-box;
}

.stb-input select {
  appearance: none;
  background: var(--color-on-primary)
    url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0.660628 3.81033L6.43182 9.58152C7.30085 10.4505 8.70465 10.4505 9.57367 9.58152L15.3449 3.81033C16.7487 2.40652 15.746 0 13.7628 0H2.22041C0.237259 0 -0.743176 2.40652 0.660628 3.81033Z' fill='%23191919'/></svg>");
  background-repeat: no-repeat;
  background-position: right 19px top 15px;
  background-size: 18px;
  padding-right: 40px;
}

.stb-input textarea {
  padding: 10px;
  line-height: 24px;
  min-height: 88px;
  max-height: 200px;
}

.stb-input input[disabled],
.stb-input select[disabled],
.stb-input textarea[disabled] {
  cursor: not-allowed;
  background-color: var(--color-background);
  border: 1px solid var(--color-disabled);
  color: var(--color-disabled);
}

.stb-input select[disabled] {
  background: var(--color-on-primary)
    url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0.660628 3.81033L6.43182 9.58152C7.30085 10.4505 8.70465 10.4505 9.57367 9.58152L15.3449 3.81033C16.7487 2.40652 15.746 0 13.7628 0H2.22041C0.237259 0 -0.743176 2.40652 0.660628 3.81033Z' fill='%23757575'/></svg>");
  background-repeat: no-repeat;
  background-position: right 19px top 15px;
  background-size: 18px;
}

/* We wrap icon in a zero-size relative positioned container
this allows us to specify children using absolute positioning,
and still have a reference to the original placement (needed for flex sizes).
Absolute positioned elements do not take up any space in the DOM,
so the input stays the same size, regardless if icon is used or not.*/
.stb-input .icon-sign-container {
  position: relative;
  width: 0;
  height: 0;
}

.stb-input .inline-icon {
  position: absolute;
  right: 24px;
  top: -8px;
}

.stb-input .validation-message {
  display: flex;
  align-items: center;
  margin-top: 25px;
  margin-left: 12px;
  animation: scale 0.1s ease-in-out;
}

.stb-input .validation-message div.icon-wrapper {
  width: 42px;
}

.stb-input .validation-message i.icon-medium {
  font-size: 24px;
  line-height: 24px;
}

.stb-input .validation-message i {
  margin-right: 21px;
  display: block;
  width: 25px;
}

.stb-input .validation-message {
  display: none;
}

.stb-input .validation-message i {
  /* Overriding empty icon since we fill it with :before content */
  background-color: transparent;
}

.stb-input.success .validation-message,
.stb-input.invalid .validation-message {
  display: flex;
}

.stb-input.success .validation-message i:before {
  content: 'check-circle-filled';
}

.stb-input.invalid .validation-message i:before {
  content: ''; /*Originally said error-filled*/
}

.stb-input.success .validation-message i {
  color: var(--color-success-accent);
}

.stb-input.invalid .validation-message i {
  color: var(--color-error-accent);
}

.stb-input .error {
  line-height: 16px;
  margin: 0;
  color: var(--color-on-surface);
  position: relative;
  letter-spacing: 0.2px;
  font-weight: 600;
  opacity: 0;
  animation: display-error-message 0.4s forwards;
}

.stb-input .success {
  line-height: 16px;
  margin: 0;
  color: var(--color-on-surface);
  position: relative;
  letter-spacing: 0.2px;
  font-weight: 600;
  top: -10px;
  opacity: 0;
  animation: display-error-message 0.4s forwards;
}

.stb-input.invalid input {
  padding-left: 6px;
}

.stb-input.invalid input,
.stb-input.invalid select,
.stb-input.invalid textarea {
  border: 3px solid var(--color-error-accent);
  padding-left: 6px;
}

.stb-input.success input,
.stb-input.success select,
.stb-input.success textarea {
  border: 3px solid var(--color-success-accent);
}

@keyframes display-error-message {
  from {
    opacity: 0;
    top: -10px;
  }
  to {
    opacity: 1;
    top: 0;
  }
}

@keyframes delayed-show {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}