// Copyright 2017 Palantir Technologies, Inc. All rights reserved.

$resources-path: "./assets";

$asset-padding: $pt-grid-size;
$asset-margin: $pt-grid-size * 2;
$asset-icon-size: $pt-grid-size * 6.4;

$asset-background-color: rgba($dark-gray5, 0.1);
$dark-asset-background-color: rgba($light-gray1, 0.1);

.blueprint-resources {
  @include pt-flex-container(row, $asset-margin);
  flex-wrap: wrap;
}

.blueprint-resource {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: $asset-margin;
  margin-right: 0;
  padding-left: $asset-icon-size + $asset-padding * 2;
  position: relative;
  white-space: nowrap;

  &::before {
    background: url("#{$resources-path}/sketch-mac-icon@2x.png") no-repeat center / $asset-icon-size;
    content: "";
    display: block;
    height: $asset-icon-size;
    left: $asset-padding;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: $asset-icon-size;
  }

  &:hover .blueprint-resource-title {
    text-decoration: underline;
  }
}

// when the window is narrower than this width, all the resources wrap into a single column
$flex-wrap-width: 900px;

@media (min-width: $flex-wrap-width) {
  .blueprint-resource:first-of-type {
    margin-right: $asset-margin;
  }
}

.blueprint-resource-title {
  color: $pt-link-color;
  // must use inline elements inside <a> tag
  display: block;
  font-size: $pt-font-size-large;
  font-weight: 700;
  margin-bottom: $pt-grid-size * 0.5;
}

