@import '~scss/variables';
@import '~scss/mixins';

.builderContent {
  display: grid;
  grid-template-columns: auto 30% 30%;
  grid-column-gap: 15px;
  padding: 12px;
  height: 64px;
  border-radius: 4px;
  background-color: $light-color01;

  li {
    height: 40px;
    display: grid;
    grid-template-columns: 40px auto;
    grid-column-gap: 15px;

    .icon {
      display: inline-block;
      height: 40px;
      width: 40px;
      background-size: 40px;
      background-repeat: no-repeat;
    }

    .info {
      @include ellipsis;

      .value {
        height: 20px;
        @include ellipsis;
        @include TypographyTitleH6;
      }

      .name {
        height: 20px;
        @include TypographyParagraph($dark-color01);
      }
    }
  }

  .downloadContent {
    display: inline-block;
    grid-template-columns: none;
    grid-column-gap: initial;

    a {
      display: grid;
      grid-template-columns: 40px auto;
      grid-column-gap: 15px;

      &:hover {
        .info p {
          color: $primary;
        }
      }
    }
  }
}
