//
// Copyright IBM Corp. 2020, 2020
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@import '../../globals/scss/carbon-settings';
@import '../../globals/scss/variables';

@import '~carbon-components/scss/components/link/link';
@import '~carbon-components/scss/components/tile/tile';
@import '~carbon-components/scss/components/tooltip/tooltip';

$ide-card-size: carbon--mini-units(30);

.#{$ide-prefix}-card {
  position: relative;
  display: flex;
  height: calc(100% - #{carbon--mini-units(0.4)}); /* Double the margin above */
  min-height: $ide-card-size;
  flex: 1 0 21%;
  padding: 0;
  // stylelint-disable-next-line carbon/layout-token-use
  margin: $spacing-01 / 2;
  background-color: $ui-background;

  .#{$ide-prefix}-card--card-overides {
    position: relative;
    flex-grow: 1; /* let the card consume the entire space in the container */
    margin: 0;
  }
}

.#{$ide-prefix}-card-container {
  min-width: $ide-card-size;

  .#{$ide-prefix}-card--card-overides,
  .#{$ide-prefix}-card--card-overides:hover,
  .#{$ide-prefix}-card--card-overides:visited,
  .#{$ide-prefix}-card--card-overides:visited:hover {
    padding: carbon--mini-units(2);
    // carbon overides to remove blue text color
    color: inherit; /* no blue link color */
    text-decoration: none; /* no underline */
  }
}

.#{$ide-prefix}-card-container__large {
  min-width: $ide-card-size * 2;
}

.#{$ide-prefix}-card--tile {
  display: flex;
  height: 100%; /* use all height in the container */
  flex-flow: column nowrap;
}

.#{$ide-prefix}-card--tile-img-group {
  display: flex;
  justify-content: space-between;
}

.#{$ide-prefix}-card--tile-img-group-right {
  direction: rtl;
}

.#{$ide-prefix}-card--tile-img {
  display: flex;
  width: carbon--mini-units(4);
  height: carbon--mini-units(4);
  align-items: center;
  justify-content: flex-start;
  margin-bottom: $layout-01;
}

.#{$ide-prefix}-card--text-container {
  display: flex;
  flex: 1;
  flex-direction: column;

  .#{$ide-prefix}-card---tile-text {
    @include carbon--type-style('body-short-01');
  }

  .#{$ide-prefix}-card-heading-container {
    flex-grow: 1;
    .#{$ide-prefix}-card--heading {
      @include carbon--type-style('productive-heading-03');

      margin-bottom: $spacing-02;
    }
  }
}

.#{$ide-prefix}-card--heading-title {
  @include carbon--type-style('label-01');

  min-height: $layout-01;
  margin-bottom: $spacing-01;
}

.#{$ide-prefix}-card--heading-description {
  @include carbon--type-style('body-short-01');
}

.#{$ide-prefix}-card--card-disabled {
  background-color: $card__disabled-background-colour;

  .#{$ide-prefix}-card--card-overides {
    background-color: $card__disabled-background-colour;
    cursor: not-allowed;

    &:hover {
      background-color: $card__disabled-background-colour; /* force background color change on hover if the card is disabled */
    }
  }

  .#{$ide-prefix}-card--tile-img,
  .#{$ide-prefix}-card--heading-title,
  .#{$ide-prefix}-card--heading-description {
    opacity: 0.5;
  }

  .#{$ide-prefix}-card--heading {
    opacity: 0.75;
  }

  .#{$prefix}--tooltip__label {
    margin-left: $layout-07;
    visibility: hidden; /* needed to disable the carbon tooltip icon */
  }

  .#{$ide-prefix}-card--card-tooltip {
    width: carbon--mini-units(2);

    /* As we're faking the toolip over the whole card, the caret points at the wrong location. Better to hide it */
    padding-left: $layout-06;
    margin-left: -$spacing-03; /* Account for the caret */
    .#{$prefix}--tooltip__caret {
      display: none;
    }
  }
}