@layer components {
  .rgb_input {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-xs);
    .extended_input_wrapper {
      width: 100%;
    }
    .rgb_input {
      text-align: right;
      text-transform: uppercase;
    }
    .component_row {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--spacing-xs);
      .component_input {
        flex: 1 0;
      }
    }
  }
}