[type="file"] {
    --color: var(--muted-color);
    padding: calc(var(--form-element-spacing-vertical)/2) 0;
    border: none;
    border-radius: 0;
    background: none;
  
    &::-webkit-file-upload-button {
      --background-color: var(--secondary);
      --border-color: var(--secondary);
      --color: var(--secondary-inverse);
      margin-right: calc(var(--spacing) / 2);
      padding: calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2);
      border: var(--border-width) solid var(--border-color);
      border-radius: var(--border-radius);
      outline: none;
      background-color: var(--background-color);
      box-shadow: var(--box-shadow);
      color: var(--color);
      font-size: 1rem;
      font-weight: var(--font-weight);
      line-height: var(--line-height);
      text-align: center;
      cursor: pointer;
  
      @if $enable-transitions {
        transition:
          background-color var(--transition),
          border-color var(--transition),
          color var(--transition),
          box-shadow var(--transition);
      }
    }
  
    &:hover,
    &:active,
    &:focus {
      --color: var(--color);
      border: none;
      background: none;
  
      &::-webkit-file-upload-button {
        --background-color: var(--secondary-hover);
        --border-color: var(--secondary-hover);
      }
    }
}