.form-pnwf {

  display: flex;
  position: relative;

  fieldset {

    display: flex;
    flex-direction: column-reverse;
    gap: .25rem;
    position: relative;

    input:not([type=radio]):not([type=checkbox]),
    textarea,
    select,
    button {
      background-color: transparent;
      outline: none;
    	-webkit-appearance: none;
      border: none;
      transition: .3s ease-out;
    }

    input[type=radio],
    input[type=checkbox] {
      display: none;
    }

    input[required]:not([type=radio]):not([type=checkbox]):not([type=file]) + label:before,
    textarea[required] + label:before,
    select[required] + label:before,
    input[required][type=radio] + label + legend:before,
    input[required][type=checkbox] + label + legend:before {
      content: "*";
    }

    input:not([type=radio]):not([type=checkbox]) + label,
    textarea + label,
    select + label {

      position: relative;

      > span {
        cursor: pointer;
      }

      legend {

        cursor: pointer;
        overflow: hidden;
        display: block;
        transition: .3s;

        span {
          display: block;
          clear: both;
          width: 100%;
          transition: .6s;
        }

      }

      legend:before {
        display: inline-block;
        position: absolute;
        top: 0;
        right: 0;
      }

    }

    input:not([type=radio]):not([type=checkbox]):not(:focus) + label,
    textarea:not(:focus) + label,
    select:not(:focus) + label {

      legend {

        max-height: 0;

        span {
          opacity: 0;
        }
      }

    }

    input:not([type=radio]):not([type=checkbox]):focus + label legend,
    textarea:focus + label legend,
    select:focus + label legend {

      max-height: 500px;

      span {
        opacity: 1;
      }

    }

    input[type=radio] + label,
    input[type=checkbox] + label {

      position: relative;
      cursor: pointer;

    }

    input[type=radio] + label + legend,
    input[type=checkbox] + label + legend {
      padding-bottom: .25rem;
    }

    input[type=file] {
      background: transparent;
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 2;
      cursor: pointer;
    }

    input[type=file] + label {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    button,
    input[type=submit] {
      cursor: pointer;
    }

  }

  fieldset.toggle-switch {

    flex-direction: row;
    align-items: center;

    label:last-child {
      flex-grow: 0;
    }

    label {

      cursor: pointer;
      flex: 1;

      input[type=checkbox] {
        display: none;
      }

      input[type=checkbox] + span {
        display: inline-block;
        position: relative;
        background-color: red;
        width: 4rem;
        height: 1rem;
        transition: 0.3s ease all;
      }

      input[type=checkbox] + span:before {
        content: "";
        display: block;
        width: calc(25% - 2px);
        height: calc(100% - 2px);
        background-color: white;
        position: absolute;
        top: 1px;
        left: 1px;
        transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
      }

      input[type=checkbox]:checked + span {
        background-color: green;
      }

      input[type=checkbox]:checked + span:before {
        background-color: white;
        right: 1px;
        left: auto;
      }

      input[type=checkbox]:active + span:before {
        width: 50%;
      }

    }

  }

  ul.pnfw-uploaded-image {

    width: 100%;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(4, 1fr);
    position: relative;

    li {

      position: relative;
      width: 100%;
      padding-top: 100%;

      a:first-child {

        display: inline-block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;

        img {
          max-width: 100%;
          max-height: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }

      }

      a:last-child {
        font-size: 1rem;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
      }

    }

  }

}

.grow-focus {

  fieldset {

    > :focus,
    > :checked + label,
    > button:hover,
    > input[type=submit]:hover {
      transform: scale(1.05);
    }

  }

}