@use "../variables" as *;
@use "../mixins" as *;
@use "../utils" as *;

.mie.entry {
  // prettier-ignore
  background-image:
    linear-gradient(
        mvar("entry.bg.overlay"),
        mvar("entry.bg.overlay")
    ),
    linear-gradient(
        mvar("entry.bg.main"),
        mvar("entry.bg.main")
    );

  background-clip: padding-box;
  position: relative;
  margin: 0;

  min-width: mvar("entry.w");
  height: mvar("entry.h");
  width: mvar("entry.p");

  @include flex(row, space-between, stretch);

  &:focus {
    z-index: 15;

    > .field {
      > input, > textarea {
        z-index: 15;
      }
    }
  }

  > .field {
    position: relative;
    flex: 1;

    label {
      transition: 300ms ease all;
      pointer-events: none;
      position: absolute;

      font-size: mvar("entry.value.fs");
      color: mvar("entry.label.fg");
      font-weight: normal;

      top: mvar("entry.label.offset.empty");
      left: mvar("entry.label.ph");
    }

    textarea {
      resize: none;
    }

    > input,
    > textarea {
      transition: outline-width 100ms ease;
      color: mvar("entry.value.fg");
      position: relative;
      background: none;
      display: block;

      font-size: mvar("entry.value.fs");
      padding: mvar("entry.p");
      height: 100%;
      width: 100%;
      border: none;

      outline-color: mvar("entry.bg.outline");
      outline-style: solid;
      outline-width: 0;

      &:focus {
        color: mvar("entry.value.fg");
        outline-width: 0.2rem;
        z-index: 15;
      }

      &:focus ~ label,
      &.filled ~ label {
        top: mvar("entry.label.offset.active");
        font-size: mvar("entry.label.fs");
        color: mvar("entry.label.fg");
      }

      &[type="password"] {
        letter-spacing: 0.15rem;
      }
    }
  }

  // States
  &.disabled {
    opacity: 0.4;
  }

  &.fluid {
    width: 100%;
  }

  &.bordered {
    border: 0.1rem solid mvar("entry.border-bg");
  }

  &.transparent {
    --mie-entry-bg-main: transparent;
  }
}
