/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
@import "../style/index";

@mixin uicore-tiles-tile {

  min-height:                     $uicore-line-height * 14;
  padding:                        0 0 $uicore-line-height * 2;
  margin:                         0 0 $uicore-line-height;
  text-align:                     center;
  transition:                     all 0.2s ease-out;

  background-color:               $uicore-gray-b;
  color:                          $uicore-gray-4;

  > .uicore-link {

    display:                    block;
    padding:                    $uicore-line-height * 1.5 $uicore-line-height 0;
    margin:                     0;
    cursor:                     pointer;
    color:                      $uicore-gray-4;

    > .uicore-icon {

      width:                  $uicore-line-height * 3;
      height:                 $uicore-line-height * 3;
      font-size:              $uicore-line-height * 2.5;
      padding:                9px;
      margin:                 0 auto;
      border-radius:          $uicore-line-height * 3;
      background-color:       $uicore-green;

      transition:             all 0.2s ease-out;
    }

    > .uicore-title {

      margin:                 $uicore-line-height * 0.5 auto 0;
      font-size:              21px;
      font-weight:            300;
      line-height:            $uicore-line-height * 1.5;
    }
  }

  > .uicore-children {

    padding:                    $uicore-line-height $uicore-line-height 0;
    font-size:                  13px;
    line-height:                $uicore-line-height;

    > a {

      display:                block;
      color:                  $uicore-gray-3;
    }
  }

  &.uicore-minimal {

    min-height:                 $uicore-line-height * 9;
    padding:                    0;

    > .uicore-link {

      padding-bottom:         $uicore-line-height * 3;
    }
  }


  &.uicore-featured,
  &:hover {

    background-color:           $uicore-green;
    color:                      $uicore-white;

    > .uicore-link {

      text-decoration:        none;
      color:                  $uicore-white;

      > .uicore-icon {

        background-color:   transparent !important;
      }
    }

    > .uicore-children > a {

      color:                  $uicore-white;
    }
  }

  &.uicore-featured:hover {

    background-color:           darken( $uicore-green, 5% );
  }

  $step-colors: (
    uicore-step-0:     $uicore-green,
    uicore-step-1:     $uicore-teal-1,
    uicore-step-2:     $uicore-teal-2,
    uicore-step-3:     $uicore-teal-3,
    uicore-step-4:     $uicore-teal-4,
    uicore-step-5:     $uicore-teal-5,
    uicore-step-6:     $uicore-teal-6,
    uicore-step-7:     $uicore-teal-7,
    uicore-step-8:     $uicore-teal-8,
    uicore-step-9:     $uicore-teal-9,
    uicore-step-10:    $uicore-teal-a,
    uicore-step-11:    $uicore-teal-b,
    uicore-step-12:    $uicore-blue,
    uicore-step-13:    $uicore-blue-5,
    uicore-step-14:    $uicore-blue-4,
    uicore-step-15:    $uicore-blue-3
  );

  @each $step, $color in $step-colors {

    &.#{$step} > .uicore-link > .uicore-icon,
    &.#{$step}:hover,
    &.#{$step}.uicore-featured {

      background-color:       $color;
    }

    &.#{$step}.uicore-featured:hover {

      background-color:       darken( $color, 5% );
    }
  }
}