label-composite {
  display: block;
  margin-bottom: 1rem;

  label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-ui-1-80);
  }

  &:focus-within{
    label{
      color: var(--color-ui-1);
    }
  }

  input {
    width: 100%;
  }

  .input-group {
    width: 100%;
    display: flex;
    flex-direction: row;

    input {
      flex: 1;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* Peek button */
    #btnPeek{
      border-left: none;
      display: none;
      svg{
        fill: var(--color-ui-1-50)
      }
    }

    #btnPeek:hover{
      background:var(--color-ui-4);
      svg{
        fill: var(--color-ui-1)
      }
    }

    input:valid ~ #btnPeek{
      display: inline-block;
    }

    /* Button styles*/

    icon-button {
      border: $default-border-width-thin solid var(--color-ui-2-50);
      border-right: none;
      box-sizing: border-box;
      height: 2.5rem;
      width: 2.5rem;
    }


    icon-button:last-child {
      border-top-right-radius: $default-border-radius;
      border-bottom-right-radius: $default-border-radius;
      border-right: $default-border-width-thin solid var(--color-ui-2-50);
    }
  }
}