$attachment-icon-size: $button-height !default;
$attachment-icon-container-width: $button-width * 2 !default;
$attachment-icon-container-height: $button-height * 2 !default;
$attachment-image-container-width: 100% !default;
$attachment-image-container-height: auto !default;
$attachment-height--loading: 150px !default;
$border: 1px solid $border-color;

@mixin attachments() {
  @include loopingProgressBar(".geoscene-attachments__progress-bar");

  .geoscene-attachments {
    background-color: transparent;
    width: 100%;
  }

  .geoscene-attachments__loader-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: $attachment-height--loading;
  }

  .geoscene-attachments__loader {
    background: url("../base/images/loading-throb.gif") no-repeat center center;
    width: 100%;
    height: 64px;
  }

  .geoscene-attachments__actions {
    display: flex;
    flex-flow: row wrap;
    padding: $cap-spacing--half $side-spacing--half;
  }

  .geoscene-attachments__item-add-icon {
    padding: 0 $side-spacing--half;
  }

  .geoscene-attachments__delete-button {
    margin-right: auto; // RTL
    width: auto;
    color: $font-color--error;
  }

  .geoscene-attachments .geoscene-attachments__items {
    display: flex;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .geoscene-attachments .geoscene-attachments__item {
    margin: 0;
    list-style-type: none;
    line-height: 1.2em;
  }

  .geoscene-attachments__item-button {
    @include cardBoxShadow();

    display: flex;
    align-items: center;
    transition: border-color 125ms ease-in-out;
    margin: 0 0 $cap-spacing--half;
    outline-offset: -4px;
    border: $border;
    border-radius: $border-radius;
    border-color: transparent;
    background-color: $background-color;
    cursor: pointer;
    padding: $cap-spacing--half $side-spacing--half;
    width: 100%;
    text-align: unset;
    text-decoration: none;
    color: $interactive-font-color;

    &:focus,
    &:hover {
      border-color: $border-color--hover;
    }
  }

  .geoscene-attachments__item-link {
    display: block;
    position: relative;
    text-decoration: none;

    &:hover,
    &:focus {
      .geoscene-attachments__item-link-overlay {
        opacity: 1;
      }
    }
  }

  .geoscene-attachments__item-add {
    background-color: transparent;
    padding: $cap-spacing--half 0;
  }

  .geoscene-attachments__add-attachment-button {
    justify-content: flex-start;
    transition: background-color 250ms ease-in-out;
    border-radius: $border-radius;
    padding: $cap-spacing $side-spacing--quarter;
    font-size: $font-size--small;

    &:hover {
      @include defaultBoxShadow();

      background-color: $background-color;
      text-decoration: none;
    }
  }

  .geoscene-attachments__item-link-overlay {
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    transition: opacity 250ms ease-in-out;
    opacity: 0;
    pointer-events: none;
    user-select: none;

    &-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 100%;
      background-color: rgba($background-color--inverse, 0.5);
      padding: $cap-spacing--plus-half;
      color: $background-color;

      svg {
        fill: $interactive-font-color--inverse;
      }
    }
  }

  .geoscene-attachments__item-mask {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px $border-color--subtle;
    width: $attachment-icon-container-width;
    height: $attachment-icon-container-height;
    overflow: hidden;
  }

  .geoscene-attachments__item-mask--icon {
    background-color: $background-color--offset;
    padding: $cap-spacing--double 0;
  }

  .geoscene-attachments__item-mask--icon .geoscene-attachments__image {
    width: $attachment-icon-size;
    height: $attachment-icon-size;
  }

  .geoscene-attachments__metadata {
    display: flex;
    justify-content: space-between;
    margin-top: $cap-spacing--quarter;

    .geoscene-attachments__metadata-fieldset {
      flex: 0 1 calc(50% - 1px);
      margin: 0;
      border: none;
      background-color: $background-color;
      padding: $cap-spacing--half $side-spacing--half;
      text-align: center;
      font-size: $font-size--small;
    }
  }

  .geoscene-attachments__file-name {
    @include wordbreak();

    display: inline-block;
    margin-bottom: $cap-spacing--quarter;
    font-size: $font-size--small;
  }

  .geoscene-attachments__file-fieldset {
    margin: 0;
    border: none;
    padding: $cap-spacing $side-spacing--half;
  }

  .geoscene-attachments__file-input {
    position: absolute;
    opacity: 0;
    z-index: -1;
    width: 0.1px;
    height: 0.1px;
    overflow: hidden;
  }

  .geoscene-attachments__container--list {
    // List
    .geoscene-attachments__items {
      flex-flow: column nowrap;
    }

    .geoscene-attachments__item-mask {
      position: relative;
      flex: 0 0 auto;
      margin-right: $side-spacing--half;
    }

    .geoscene-attachments__image {
      left: 50%;
      max-width: unset;
      max-height: unset;
    }

    .geoscene-attachments__label {
      display: flex;
      flex: 1 1 auto;
      justify-content: space-between;
    }

    .geoscene-attachments__filename {
      @include wordbreak();

      flex: 1 0 0;
      cursor: pointer;
    }

    .geoscene-attachments__item-chevron-icon {
      flex: 0 0 auto;
      cursor: pointer;
      padding: 0 $side-spacing;
    }
  }

  .geoscene-attachments__container--preview {
    // Preview
    .geoscene-attachments__items {
      flex-flow: row wrap;
      align-items: center;
    }

    .geoscene-attachments__item {
      margin-bottom: $cap-spacing;
      width: 100%;
    }

    .geoscene-attachments__item-mask {
      width: $attachment-image-container-width;
      height: $attachment-image-container-height;
    }

    .geoscene-attachments__item-button {
      flex-flow: column nowrap;
      box-shadow: none;
    }

    .geoscene-attachments__item-button .geoscene-attachments__label {
      margin: $cap-spacing 0;
    }

    .geoscene-attachments__image {
      max-width: $attachment-image-container-width;
    }

    .geoscene-attachments__filename {
      @include wordbreak();

      margin-top: $cap-spacing;
      width: calc(#{$attachment-image-container-width} - #{$side-spacing});
      overflow: hidden;
      text-align: center;
      text-overflow: ellipsis;
    }

    .geoscene-attachments__item-mask--icon {
      background-color: transparent;
    }
  }

  .geoscene-attachments__form-node {
    @include cardBoxShadow();

    // Form
    background-color: $background-color;
    padding: $cap-spacing--half $side-spacing--half;

    .geoscene-attachments__item-mask {
      box-shadow: none;
      width: unset;
      height: unset;
    }

    .geoscene-attachments__image {
      max-width: 100%;
    }
  }

  .geoscene-attachments__error-message {
    @include defaultBoxShadow();

    margin: $cap-spacing--half $side-spacing--half;
    border-top: 3px solid $border-color--error;
    background-color: $background-color;
    padding: $cap-spacing $side-spacing;
    animation: geoscene-fade-in-down 250ms ease-in-out;
  }

  .geoscene-attachments__progress-bar {
    position: absolute;
    width: 100%;
  }

  [dir="rtl"] {
    .geoscene-attachments__item-mask {
      margin-right: 0;
      margin-left: $side-spacing--half;
    }
  }
}

@if $include_Attachments == true {
  @include attachments();
}