@use '@vizality' as vz;

 .vz-docs-components-icons {
   $base: &;
  &-icon-wrapper {
    display: flex;
    margin: 4px;
    &:hover {
      #{$base}-icon:not([vz-active]) {
        background-color: var(--background-modifier-selected);
        color: var(--interactive-hover);
      }
    }
  }
  &-icon {
    cursor: pointer;
    border-radius: 8px;
    padding: 18px;
    overflow: visible;
    &[vz-active] {
      background: vz.color('blurple');
      color: var(--header-primary);
    }
  }
  &-aside {
    &-icon-wrapper {
      cursor: default;
      color: var(--header-primary);
      max-width: 200px;
      padding: 0 40px;
      backface-visibility: hidden;
      svg {
        max-width: 200px;
        max-height: 200px;
      }
    }
    &-icon {
      overflow: visible;
      box-sizing: border-box;
      height: max-content;
    }
    &-icon-name {
      padding: 0 20px;
      margin-bottom: 40px;
      max-width: 280px;
      text-align: center;
      line-height: 1.5;
    }
  }
}
