@import '../style/variable';
@import '../style/mixin';

#snippets {
  @include overflow-auto(y);
  padding: $padding;
  .section {
    margin-bottom: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
    cursor: pointer;
    &:active {
      .name {
        background: var(--highlight);
        color: var(--select-foreground);
      }
    }
    .name {
      padding: $padding;
      color: var(--primary);
      background: var(--darker-background);
      transition: background $anim-duration;
      .btn {
        margin-left: 10px;
        float: right;
        text-align: center;
        width: 18px;
        height: 18px;
        line-height: 18px;
        font-size: $font-size-s;
      }
    }
    .description {
      color: var(--foreground);
      padding: $padding;
      transition: background $anim-duration;
    }
  }
}