// ============================================================================
// :: Show more
// ============================================================================
/**
 * Component to lead the user to a page with more results. It usually has an
 * indicator to show the amount of results there are.
 */

// ============================================================================
// :: Root
// ============================================================================
.m-show-more {
  position: relative;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem 2rem;

  border-radius: $border-radius-base;
  background-color: $background-color-base;

  transition: background-color 0.3s ease-in;

  &:hover{
    background-color: darken($background-color-base, 10%);
  }
}

// ============================================================================
// :: Elements
// ============================================================================
.m-show-more__link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: $z-index-roof;

  width: 100%;
  height: 100%;
}

button.m-show-more__link {
  padding: 0;

  border: none;
  background: transparent;

  cursor: pointer;
}

.m-show-more__text {
  margin-right: 2rem;

  font-style: italic;

  @include respond-at($breakpoint-tablet-default) {
    font-style: normal;
  }
}

.m-show-more__badge {
  margin-left: 1rem;
}

.m-show-more__arrow {
  @extend %__icon-arrow-right;

  // Style the icon
  &::before {
    font-size: $icon-size-2x-large;

    color: $text-color-base;
  }
}