.file-input {
  @mixin button-variant($colour, $background, $border) {
    color: $colour;
    background: $background;
    border-color: $border;
  }

  // how it works
  // -1----------------------------
  // | -2------------------------ |
  // | | -3------               | |
  // | | |button|  "Text" field | |
  // | | --------               | |
  // | -------------------------- |
  // ------------------------------
  // 1. label - responsible for layout only
  // 2. ::before pseudo element - fake button
  // 3. ::after pseudo element - fake input

  + label {
    display: none;
  }
  
  .js-ready & {

    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;

    + label {
      cursor: pointer;
      font-family: $font-default;
      display: block;
      white-space: nowrap;
      overflow: hidden;
      position: relative;
      text-overflow: ellipsis;
      background-color: #fff;

      &::before,
      &::after {
        display: inline-block;
        border-radius: 3px 0 0 3px;
        transition: border-color 300ms, color 300ms;
        font-weight: $font-weight-semibold;
      }

      &::before {
        @include button-variant($colour-blue, #fff, $colour-blue);
        content: ' ' attr(data-button-text) ' ';
        white-space: pre;
        border-width: 1px;
        border-style: solid;
        padding: 0.5em;
        margin-right: 0.5em;
        position: relative;
        z-index: 1;
      }

      &::after {
        content: '';
        border: 1px solid $colour-grey-light;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
      }
    }

    //hover state
    + label:hover {
      &::before {
        @include button-variant($colour-blue-dark, #fff, $colour-blue-dark);
      }

      &::after {
        border-color: $colour-grey-lightmid;
      }
    }

    // keyboard tab navigation/focus
    &:focus + label {
      outline: 1px dotted $colour-blue-dark;
      outline: -webkit-focus-ring-color auto 5px;

      &::before {
        @include button-variant($colour-blue-dark, #fff, $colour-blue-dark);
      }
    }

    //disabled input
    &[disabled] + label {
      cursor: not-allowed;
      border-color: $colour-grey-light;
      color: $colour-grey-light;

      &::before {
        @include button-variant($colour-form-input-disabled, $colour-grey-xlight, $colour-form-input-disabled);
      }

      &::after {
        border-color: $colour-grey-light;
      }
    }
  }
}