.map-signatures {
  .map-signature, .map-signature-header {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    margin-bottom: 0.25rem;

    > div {
      background: var(--base2);
      font-size: 1rem;
      line-height: 1;
      height: 1.25rem;
    }

    input, button {
      background: var(--base2);
      border: none;
      width: 100%;
      outline: none;
      color: currentColor;
      text-align: center;
      font-size: 1rem;
      line-height: 1;
      font-family: inherit;
      padding: 0.125rem 0.25rem;
      height: 1.25rem;
      outline: none;
    }

    button {
      cursor: pointer;
    }

    .sig-icon {
      flex: 0 0 1.5rem;
      background: transparent;
      text-align: center;

      svg.icon {
        width: 1.25rem;
      }

      div {
        padding: 0.125rem 0;
        font-weight: 800;
      }
    }

    .sig-id {
      flex: 0 0 4rem;
    }

    .sig-type {
      flex: 0 0 3.75rem;
    }

    .sig-mass {
      display: none;

      &.hole {
        display: block;
      }

      &.full {
        [value=crit], [value=full] { display: none; }
      }

      &.half {
        [value=full], [value=half] { display: none; }
      }

      &.crit {
        [value=half], [value=crit] { display: none; }
      }
    }

    .sig-eol {
      flex: 0 0 2.5rem;
      display: none;

      &.hole {
        display: block;
      }

      [value=lt4] { display: block; }
      [value=lt1] { display: none; }
      [value=no] { display: none; }

      &.lt4 {
        [value=lt4] { display: none; }
        [value=lt1] { display: block; }
        [value=no] { display: none; }
      }

      &.lt1 {
        [value=lt4] { display: none; }
        [value=lt1] { display: none; }
        [value=no] { display: block; }
      }
    }

    .sig-name {
      position: relative;
      flex-grow: 1;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;

      .link-to-leads-to {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 5;
        pointer-events: none;

        a {
          margin-left: 1.25rem;
          flex-grow: 1;
          padding: 0.125rem 0;
          background: var(--base2);
          pointer-events: auto;
        }

        .icon {
          width: 1.25rem;
          height: 1.25rem;
          padding: 0.125rem;
          opacity: 0.5;
        }
      }

      input:focus ~ .link-to-leads-to {
        display: none;
      }
    }

    .sig-created-at {
      flex: 0 0 3rem;

      &:not(form) {
        padding: 0.125rem 0.25rem;
      }
    }

    .sig-destroy {
      flex: 0 0 1.5rem;
      padding: 0.125rem 0.25rem;
    }
  }

  .map-signature-header {
    .active button {
      font-weight: 800;
    }

    > div {
      text-align: center;
      padding: 0.125rem 0.25rem;

      &.sig-destroy {
        background: transparent;
      }
    }
  }

  .pasta {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--base00);

    textarea {
      background: var(--base2);
      border: none;
      padding: 0.5rem;
      font-family: inherit;
      font-size: 1rem;
      outline: none;
      resize: none;
      width: 100%;
      height: 3rem;
      overflow: hidden;
    }

    .partial, .whole {
      flex: 1 0 auto;
      position: relative;

      &::after {
        position: absolute;
        top: 1rem;
        width: 100%;
        font-size: 1rem;
        text-align: center;
        pointer-events: none;
      }
    }

    .partial::after { content: "partial paste"; }
    .whole::after { content: "whole paste"; }
  }
}