.file
  @extend %unselectable
  align-items: stretch
  display: flex
  justify-content: flex-start
  position: relative
  width: 100%
  font-size: var(--group-form-field-control-font-size)
  justify-content: center
  .file-label
    width: 100%
    flex-direction: column
  .file-cta
    flex-direction: column
    height: auto
    padding: 1em 3em
  .file-icon
    height: 1.5em
    width: 1.5em

.file-label
  align-items: stretch
  display: flex
  cursor: pointer
  justify-content: flex-start
  overflow: hidden
  position: relative
  gap: 0.5rem
  font-weight: var(--group-form-field-label-font-weight)
  color: var(--group-form-field-label-color)
  text-align: center
  hyphens: auto
  &:hover
    .file-cta,
    .file-label
      color: var(--group-form-field-label-color-hover)
    .file-cta
      background-color: var(--group-form-field-control-background-hover)
      border-color: var(--group-form-field-control-border-color-hover)
  &:active,
  &:focus-within
    .file-cta,
    .file-label
      color: var(--group-form-field-label-color-active)
    .file-cta
      background-color: var(--group-form-field-control-background-active)
      border-color: var(--group-form-field-control-border-color-active)

.file-input
  height: 100%
  left: 0
  opacity: 0
  outline: none
  position: absolute
  top: 0
  width: 100%

.file-cta
  @extend %control
  justify-content: flex-start
  border-style: var(--group-file-border-style)
  border-color: var(--group-form-field-control-border-color)
  border-radius: var(--group-form-field-control-radius)
  background: var(--group-form-field-control-background)
  font-size: 1em
  padding-left: 1em
  padding-right: 1em
  white-space: nowrap
  gap: .5rem

.file-cta
  background-color: var(--group-form-field-control-background)
  color: var(--group-form-field-control-color)

.file-icon
  align-items: center
  display: flex
  height: 1em
  justify-content: center
  +ltr-property("margin", 0.5em)
  width: 1em

.file.is-success
  .file-label,
  .file-cta
    color: var(--group-form-field-label-success-color)
  .file-cta
    border-color: var(--group-form-field-control-success-border-color)
    background: var(--group-form-field-control-success-background)
  .file-label
    &:active,
    &:focus-within
      .file-cta
        border-color: var(--group-form-field-control-border-color-active)
        color: var(--group-link-color-active)
        .file-label
          color: var(--group-link-color-active)

.file.is-danger
  .file-label,
  .file-cta
    color: var(--group-form-field-label-danger-color)
  .file-cta
    border-color: var(--group-form-field-control-danger-border-color)
    background: var(--group-form-field-control-danger-background)
  .file-label
    &:active,
    &:focus-within
      .file-cta
        border-color: var(--group-form-field-control-border-color-active)
        color: var(--group-link-color-active)
        .file-label
          color: var(--group-link-color-active)

// warning is deprecated
.file.is-warning
  .file-label,
  .file-cta
    color: var(--group-color-text-warning)
  .file-cta
    border-color: var(--group-color-border-warning)
    background: var(--group-color-warning-1)
  .file-label
    &:active,
    &:focus-within
      .file-cta
        border-color: var(--group-form-field-control-border-color-active)
        color: var(--group-link-color-active)
        .file-label
          color: var(--group-link-color-active)

.file.is-disabled
  .file-label,
  .file-cta
    @extend %disabled
    color: var(--group-file-label-disabled-color)
  .file-cta
    border-color: var(--group-form-field-control-disabled-border-color)
    background: var(--group-form-field-control-disabled-background)