/* ========================================================================= */
.input-group {
  position: relative;
  margin: 20px 0;

  input,
  select {
    width: 100%;
    padding: 5px;
    border: none;
    outline: none;
    border-bottom: 1px solid #ccc;
    font-size: 0.9rem;
    background-color: transparent;
  }

  :is(input, select):is(:focus, .focus) {
    border-bottom: 2px solid #04aa6d;

    & + label {
      opacity: 1;
      color: #04aa6d;
    }
  }

  input:focus + label,
  input:not(:placeholder-shown) + label {
    font-size: 0.9rem;
    transform: translateY(-75%);
    opacity: 1;
    color: green;
  }

  select:focus + label,
  select:not(:placeholder-shown) + label {
    font-size: 0.9rem;
    transform: translateY(-75%);
    opacity: 1;
    color: green;
  }

  label {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0.9rem;
    padding: 5px;
    transition: 0.3s;
    pointer-events: none;
    user-select: none;
    opacity: 0.5;
  }
}

.XXinput-group,
.input-group-v,
.input-group-h {
  input,
  select {
    width: 100%;
    padding: 5px;
    border: none;
    outline: none;
    border-bottom: 1px solid #ccc;
    font-size: 1rem;
    background-color: transparent;
  }

  :is(input, select):focus {
    border-bottom: 2px solid #04aa6d;
    text-align: left;
  }
}

.input-group {
  position: relative;
  margin: 16px 0;

  :is(input, select):focus + label {
    opacity: 1;
    color: #04aa6d;
  }

  input:focus + label,
  input:not(:placeholder-shown) + label {
    font-size: 0.9rem;
    transform: translateY(-75%);
  }

  label {
    position: absolute;
    top: 0;
    left: 0;

    font-size: 0.9rem;
    padding: 5px;
    transition: 0.3s;
    pointer-events: none;
    user-select: none;
    opacity: 0.5;

    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.input-group-h,
.input-group-v {
  display: flex;
  align-items: center;

  label {
    color: blueviolet;
  }

  label:has(+ :is(input, select):focus) {
    color: #04aa6d;
  }
}

.input-group-v {
  flex-direction: column;
  align-items: flex-start;
}

/* ========================================================================= */

button.btn {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 3px;
  background-color: inherit;

  &:not(:disabled):hover {
    cursor: pointer;
    border: 1px solid green;
  }

  &:disabled svg {
    color: gray;
  }

  svg {
    width: 16px;
    height: 16px;
  }
}

button.btn-add svg {
  color: green;
}

button.btn-edit svg {
  color: orange;
}

button.btn-save svg {
  color: green;
}

button.btn-cancel svg {
  color: blue;
}

button.btn-delete svg {
  color: red;
}

button.btn-close svg {
  color: red;
}

button.btn-paste svg {
  color: black;
}

/* ====================================================== */

@media (width < 500px) {
  input[type="text"] {
    text-overflow: ellipsis; /* O 'clip' */
    white-space: wrap;
  }

  .title-bar {
    height: 55px !important;
  }

  button.btn:not(.xx) {
    flex-direction: column;
    gap: 1px;
    height: 45px;
    justify-content: center;

    svg {
      height: 20px;
      width: 20px;
    }
  }
}