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

$gap: 12px;

.container {
 
  li {
    display: inline-block;
    width: 134px;
    height: 100px;
    padding: 12px 4px;
    margin-bottom: $gap;
    text-align: center;
    border-radius: $border-radius;
    border:solid 1px $light-color06;
    cursor: pointer;
    transition: all .3s ease-in-out;

    &:hover {
      box-shadow: 0 3px 6px $light-color06;  
    }

    & + li {
      margin-left: $gap;
    }
  }
  
  figure {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
    padding: 4px;
    
    :global {
      .icon {
        width: 100%;
        height: 100%;
      }
    }
  }

  h3 {
    @include TypographyTitleH6();
    @include ellipsis();
  }

}

li.selected {
  border-color: $dark-color01;
  box-shadow: 0 3px 6px $light-color06;  
}