bulma/sass/form/file.sass

$file-border-color: var(--border, #{$border}) !default
$file-radius: var(--radius, #{$radius}) !default

$file-cta-background-color: $scheme-main-ter !default
$file-cta-color: var(--text, #{$text}) !default
$file-cta-hover-color: var(--text-strong, #{$text-strong}) !default
$file-cta-active-color: var(--text-strong, #{$text-strong}) !default

$file-name-border-color: $border !default
$file-name-border-style: solid !default
$file-name-border-width: 1px 1px 1px 0 !default
$file-name-max-width: 16em !default

$file-colors: $form-colors !default

.file
  --file-radius: #{$file-radius}
  --file-cta-hover-color: #{$file-cta-hover-color}
  --file-cta-active-color: #{$file-cta-active-color}
  --file-border-color: #{$file-border-color}
  --file-cta-background-color: #{$file-cta-background-color}
  --file-cta-color: #{$file-cta-color}
  --file-name-border-color: #{$file-name-border-color}
  --file-name-border-style: #{$file-name-border-style}
  --file-name-border-width: #{$file-name-border-width}
  --file-name-max-width: #{$file-name-max-width}
  @extend %unselectable
  align-items: stretch
  display: flex
  font-size: var(--file-font-size)
  justify-content: flex-start
  position: relative
  // Colors
  @each $name, $pair in $file-colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      --hover-background-l-delta: -2.5%
      --hover-background-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--hover-background-l-delta)})
      --hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--hover-background-#{$name}-l), var(--#{$name}-a))
      --focus-box-shadow-color-hsla: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--#{$name}-l), 0.25)
      --focus-box-shadow-color: var(--focus-box-shadow-color-hsla, #{bulmaRgba($color, 0.25)})
      --active-background-l-delta: -5%
      --active-background-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--active-background-l-delta)})
      --active-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--active-background-#{$name}-l), var(--#{$name}-a))
      .file-cta
        background-color: var(--#{$name} #{$color})
        border-color: transparent
        color: var(--#{$name}-invert, #{$color-invert})
      &:hover,
      &.is-hovered
        .file-cta
          background-color: var(--hover-background-color, #{bulmaDarken($color, 2.5%)})
          border-color: transparent
          color: var(--#{$name}-invert, #{$color-invert})
      &:focus,
      &.is-focused
        .file-cta
          border-color: transparent
          box-shadow: 0 0 0.5em var(--focus-box-shadow-color)
          color: var(--#{$name}-invert, #{$color-invert})
      &:active,
      &.is-active
        .file-cta
          background-color: var(--active-background-color, #{bulmaDarken($color, 5%)})
          border-color: transparent
          color: var(--#{$name}-invert, #{$color-invert})
  // Sizes
  &.is-small
    --file-font-size: var(--size-small, #{$size-small})
  &.is-medium
    --file-font-size: var(--size-medium, #{$size-medium})
    .file-icon
      .fa
        font-size: 21px
  &.is-large
    --file-font-size: var(--size-large, #{$size-large})
    .file-icon
      .fa
        font-size: 28px
  // Modifiers
  &.has-name
    .file-cta
      border-bottom-right-radius: 0
      border-top-right-radius: 0
    .file-name
      border-bottom-left-radius: 0
      border-top-left-radius: 0
    &.is-empty
      .file-cta
        border-radius: var(--file-radius)
      .file-name
        display: none
  &.is-boxed
    .file-label
      flex-direction: column
    .file-cta
      flex-direction: column
      height: auto
      padding: 1em 3em
    .file-name
      border-width: 0 1px 1px
    .file-icon
      height: 1.5em
      width: 1.5em
      .fa
        font-size: 21px
    &.is-small
      .file-icon .fa
        font-size: 14px
    &.is-medium
      .file-icon .fa
        font-size: 28px
    &.is-large
      .file-icon .fa
        font-size: 35px
    &.has-name
      .file-cta
        border-radius: var(--file-radius) var(--file-radius) 0 0
      .file-name
        border-radius: 0 0 var(--file-radius) var(--file-radius)
        border-width: 0 1px 1px
  &.is-centered
    justify-content: center
  &.is-fullwidth
    .file-label
      width: 100%
    .file-name
      flex-grow: 1
      max-width: none
  &.is-right
    justify-content: flex-end
    .file-cta
      border-radius: 0 var(--file-radius) var(--file-radius) 0
    .file-name
      border-radius: var(--file-radius) 0 0 var(--file-radius)
      border-width: 1px 0 1px 1px
      order: -1

.file-label
  align-items: stretch
  display: flex
  cursor: pointer
  justify-content: flex-start
  overflow: hidden
  position: relative
  &:hover
    .file-cta
      background-color: bulmaDarken($file-cta-background-color, 2.5%)
      color: var(--file-cta-hover-color)
    .file-name
      border-color: bulmaDarken($file-name-border-color, 2.5%)
  &:active
    .file-cta
      background-color: bulmaDarken($file-cta-background-color, 5%)
      color: var(--file-cta-active-color)
    .file-name
      border-color: bulmaDarken($file-name-border-color, 5%)

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

.file-cta,
.file-name
  @extend %control
  border-color: var(--file-border-color)
  border-radius: var(--file-radius)
  font-size: 1em
  padding-left: 1em
  padding-right: 1em
  white-space: nowrap

.file-cta
  background-color: var(--file-cta-background-color)
  color: var(--file-cta-color)

.file-name
  border-color: var(--file-name-border-color)
  border-style: var(--file-name-border-style)
  border-width: var(--file-name-border-width)
  display: block
  max-width: var(--file-name-max-width)
  overflow: hidden
  text-align: inherit
  text-overflow: ellipsis

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