// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@use "sass:math";
@import "@blueprintjs/core/src/common/variables";

$svg-icon-size: 36px;

$hover-transition: $pt-transition-duration $pt-transition-ease;

$icons-per-row: 5;

.docs-icons {
  .#{$ns}-input-group {
    margin: ($pt-grid-size * 5) 0;
  }

  .docs-icon-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: $pt-grid-size * 5;

    .#{$ns}-heading {
      flex: 1 1 100%;
      margin: 0 0 $pt-grid-size * 2;
      text-transform: capitalize;
    }
  }
}

.docs-icon-container,
.docs-icon-spacer {
  height: $pt-grid-size * 12;
  width: math.div(100%, $icons-per-row);

  // remove margin on last row of icons
  &:nth-last-child(-n + #{$icons-per-row}) {
    margin-bottom: 0;
  }
}

.docs-icon-container {
  cursor: pointer;
  position: relative;

  &::before {
    @include position-all(absolute, 0);
    background: $light-gray4;
    border-radius: $pt-border-radius * 2;
    content: "";
    opacity: 0;
    // must set this to avoid capturing hover events which should be sent to ClickToCopy element(s) instead
    pointer-events: none;
    transform: scale(1);
    transition: transform $pt-transition-duration $pt-transition-ease,
                opacity $pt-transition-duration $pt-transition-ease;
  }

  &:hover::before {
    opacity: 1;
    transform: scale(1.15);
  }

  &:active::before {
    background-color: $light-gray3;
  }

  .#{$ns}-icon,
  .#{$ns}-icon-large,
  .docs-icon-svg {
    position: relative;
  }

  .#{$ns}-icon,
  .#{$ns}-icon-large {
    color: $pt-icon-color;
  }

  .#{$ns}-dark & {
    &::before {
      background-color: $dark-gray3;
    }

    &:active::before {
      background-color: $dark-gray2;
    }

    .#{$ns}-icon,
    .#{$ns}-icon-large {
      color: $pt-dark-icon-color;
    }
  }
}

.docs-icon {
  align-items: center;
  border-radius: $pt-border-radius;
  display: flex;
  flex-direction: column;
  padding: ($pt-grid-size * 2) 0;
  transition: background-color $hover-transition;

  .docs-icon-svg {
    max-height: $svg-icon-size;
    max-width: $svg-icon-size;
  }

  input {
    cursor: pointer;
  }

  &:hover {
    .docs-icon-name {
      opacity: 0;
      transform: translateY(-1em);
    }

    .docs-icon-detail {
      opacity: 1;
      transform: translateY(-1em);
    }
  }
}

.docs-icon-name,
.docs-icon-detail {
  font-size: $pt-font-size-small;
  margin-top: $pt-grid-size * 2;
  text-align: center;
  transform: translateY(0);
  transition: transform $hover-transition, opacity $hover-transition;
  word-wrap: break-word;
}

.docs-icon-name {
  opacity: 1;
  position: absolute;
  top: $pt-grid-size * 4;
}

.docs-icon-detail {
  opacity: 0;
}

.icons-zero-state {
  text-align: center;
}
