_tile-gallery.scss

@import '~carbon-components/scss/globals/scss/vars';
@import '~carbon-components/scss/globals/scss/typography';

// StatefulTileGallery extra content
.extra-content {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  align-items: center;
  .#{$prefix}--search-input {
    height: $spacing-08;
    font-size: 0.875rem;
  }
  & > * {
    margin-left: $spacing-05;
    margin-right: $spacing-05;
  }
  .#{$prefix}--form-item {
    flex-grow: 0;
    flex-basis: 20rem;
  }
  .#{$prefix}--content-switcher {
    width: 10rem;
    display: flex;
    margin-left: 25px;
    margin-right: 25px;
  }
  .#{$prefix}--content-switcher-btn {
    padding: 0 $spacing-05;
    width: 5rem;
  }
}

// TileGallery component
.tile-gallery {
  &--section {
    .#{$prefix}--accordion__title {
      font-size: $spacing-05;
      font-weight: bold;
    }
    .#{$prefix}--accordion__content {
      padding-left: 0;
    }
    .#{$prefix}--accordion__item:last-child {
      border-bottom: none;
    }
    .#{$prefix}--accordion__item {
      border-top: none;
    }
    .#{$prefix}--accordion__heading {
      border-bottom: rem(1px) solid $ui-03;
    }

    &--items {
      display: flex;
      padding-bottom: $spacing-07;
      flex-flow: row wrap;
    }
  }
}

.tile-gallery-item {
  text-decoration: none;
  margin-right: $spacing-05;
  flex-basis: 30%;
  height: rem(128px);
  min-width: rem(256px);
  width: rem(256px);
  position: relative;
  margin-top: $spacing-05;
  box-shadow: none;
  border: solid rem(1px) $ui-background;

  .options {
    flex: 0;
    color: $text-01;
    .#{$prefix}--overflow-menu {
      height: $spacing-07;
      margin-right: -0.5rem;
    }
    .#{$prefix}--inline-loading {
      flex-direction: row-reverse;
      margin-left: 0.5rem;
    }
    .#{$prefix}--inline-loading__text {
      margin-bottom: 0;
      min-width: 3.5rem;
    }
  }
  .description-card {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
  }
  small {
    color: $text-01;
  }
  .title-card {
    white-space: nowrap;
    text-overflow: ellipsis;
    color: $carbon--black-100;
    font-weight: bold;
    flex: 1;
    padding-right: $spacing-05;
    overflow-x: hidden;
  }
  &.#{$prefix}--tile--clickable:hover,
  .tile-list-title:hover {
    background: $carbon--white-0;
  }
  .overflow-menu {
    margin-top: -0.5rem;
    margin-left: auto;
  }
  &.#{$prefix}--link:hover {
    text-decoration: none;
  }

  &.tile-list-title {
    height: 5.9375rem;
    flex: 0 0 31.25rem;
    box-shadow: none;
    border-bottom: 0.0625rem solid rgb(223, 227, 230);
    background: $ui-01;
    cursor: pointer;
    pointer-events: auto;
    touch-action: auto;

    &:hover {
      background: $ui-03;
      border: none;
    }
    .title-card {
      margin-left: 0.9375rem;
    }
    .description-card {
      span {
        padding-left: $spacing-07;
        color: $ui-04;
      }
    }
  }

  &.tile-card-title {
    height: 16rem;
    flex: 0 0 16rem;
    cursor: pointer;
    pointer-events: auto;
    touch-action: auto;
    .top-section {
      display: flex;
      justify-content: center;
      align-items: center;
      background: $ui-02;
      margin-bottom: 0.9375rem;
      position: relative;
      width: 100%;
      height: 12rem;
    }
    .thumbnail {
      display: block;
      padding-left: rem(5px);
    }
    .description-card {
      position: absolute;
      text-align: center;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      transition: $duration--slow-01 ease;
      opacity: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        color: $ui-background;
      }
    }
    .description-card:hover {
      background: rgba(41, 41, 41, 0.8);
      opacity: 1;
    }
    .title-card {
      margin-left: $spacing-03;
      width: 11rem;
      margin-top: 0.125rem;
    }
  }
  .content-container {
    display: flex;
    min-height: 24px;
  }
}