// ============================================================================
// :: Color
// ============================================================================
/**
 * Visualisation of a color that is mainly used in the component bp-colors
 * as part of a list.
 */

// ============================================================================
// :: Settings
// ============================================================================
$copy-offset-size: 1rem;

// ============================================================================
// :: Root
// ============================================================================
.bp-color {
  position: relative;
}

// ============================================================================
// :: Elements
// ============================================================================
.bp-color__visual {
  position: relative;

  width: 100%;

  height: 30vw;

  @include respond-at($bp-breakpoint-mobile-base) {
    height: 20vw;
  }

  @include respond-at($bp-breakpoint-tablet-base) {
    height: 18vw;
  }

  @include respond-at($bp-breakpoint-desktop-base) {
    height: 12vw;
    max-height: 19rem;
  }

  &:hover {

    .bp-color__copy {
      opacity: 1;

      transform: scale(1);
    }
  }
}

.bp-color__text {
  display: block;
  margin-top: 1.5rem;

  line-height: $line-height-normalize;
}

.bp-color__copy {
  position: absolute;
  /**
   * because the entire width and height is subtracted by one we
   * need to even it out and center the box by adding half of the
   * width and height to the positioning
   */
  top: $copy-offset-size * 0.5;
  left: $copy-offset-size * 0.5;

  /**
   * when hovering the color a copy text is shown in a white box,
   * to keep the border of the color visible, we decrease the width
   * and height by a certain amount
   */
  width: calc(100% - #{$copy-offset-size});
  height: calc(100% - #{$copy-offset-size});

  font-size: $bp-font-size-2x-small;
  text-transform: uppercase;
  font-weight: $bp-font-weight-bold;

  background-color: $bp-background-color-base;
  color: $bp-text-color-base;
  border: none;
  opacity: 0;

  transform: scale(0.95);

  transition:
    transform 0.2s ease-in-out,
    opacity 0.2s ease-in-out;

  cursor: pointer;
}

// ============================================================================
// :: States
// ============================================================================
.bp-color {

  &.is-copied {

    .bp-color__copy {
      opacity: 1;
      transform: scale(1);
    }
  }
}