@import '../../globals/vars';

.#{$iot-prefix}--tile-catalog {
  &--persistent-search {
    margin-bottom: $spacing-05;
  }
  &--canvas-container {
    display: flex;
    flex-direction: row;
  }
  &--tile-canvas {
    flex: 1;
    &--featured-tile-title {
      @include type-style('productive-heading-01');
    }
    &--featured-tile {
      background: $ui-03;
      height: 17rem;
      margin-bottom: $spacing-05;
      margin-top: $spacing-05;
    }
    &--header {
      display: flex;
      align-items: center;
      padding-bottom: $spacing-05;
      justify-content: flex-end;
      &--title {
        @include type-style('productive-heading-01');
        flex: 1;
      }

      .#{$prefix}--toolbar-action {
        height: 2.5rem;
        width: 2.5rem;
        margin-right: $spacing-05;
      }

      &--search {
        flex: 1;
        height: rem(40px);
        width: rem(40px);
        .#{$prefix}--search {
          svg {
            height: 2.5rem;
            width: 2.5rem;
            padding: $spacing-04;
          }
        }
      }

      &--select {
        .#{$prefix}--label {
          margin-bottom: 0;
        }
      }
    }

    &--content {
      .#{$prefix}--grid {
        padding: 0;
      }
      .#{$prefix}--row {
        padding-bottom: $spacing-05;
        margin-left: -$spacing-03;
        margin-right: -$spacing-03;
      }
      .#{$prefix}--col {
        padding-left: $spacing-03;
        padding-right: $spacing-03;
      }
    }

    &--placeholder-tile {
      background: $ui-03;
      height: rem(224px);
    }

    &--no-placeholder-tile {
      background: $ui-02;
      height: rem(224px);
    }

    &--bottom {
      display: flex;
      justify-content: flex-end;
    }
  }
  &--filter {
    margin-left: $spacing-05;

    width: rem(212px);
    &--title {
      @include type-style('productive-heading-01');
      margin-bottom: $spacing-05;
    }
    &--content {
      background: $ui-01;

      &--select {
        width: rem(212px);
        padding: $spacing-05;

        .#{$prefix}--select-input {
          width: rem(180px);
          background: $ui-02;
        }
      }

      &--checkbox {
        border-top: 1px solid $ui-03;
        padding: $spacing-05;
      }

      .#{$prefix}--link {
        padding: $spacing-05;
        color: $interactive-04;
      }
    }
  }
}

.sample-tile {
  background: $ui-01;
  padding: $spacing-05;
  height: rem(224px);
  &--title {
    @include type-style('productive-heading-01');
    padding-bottom: $spacing-03;
  }

  &--content {
    @include type-style('label-01');
  }
}

.#{$iot-prefix}--tile-catalog--grid-container {
  display: grid;
  grid-template-columns: var(--columns);
  gap: 1rem;
}