// ============================================================================
// :: Download button
// ============================================================================
/**
 * This component represents a button, when clicked, will download a file. The
 * text represents the name of the file.
 */

// ============================================================================
// :: Root
// ============================================================================
.a-download-button {
  @extend %__icon-download;

  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.8rem;

  text-align: left;

  border-radius: $border-radius-base;
  border: $border-width-base solid $border-color-base;
  background-color: transparent;

  transition: border-color 0.2s ease-in-out;

  cursor: pointer;

  // Style the icon
  &::before {
    order: 2;

    font-size: $icon-size-2x-large;
  }

  &:hover {
    border-color: $primary-color-base;
  }
}

// ============================================================================
// :: Elements
// ============================================================================
.a-download-button__text {
  word-break: break-word;

  // Style the icon
  &::before {
    margin-right: 1rem;

    font-size: $icon-size-2x-large;
  }
}