@use '../style/variable' as *;
@use '../style/mixin' as *;

#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;
      line-height: 18px;
      color: var(--primary);
      background: var(--darker-background);
      transition: background-color $anim-duration;
      .btn {
        margin-left: 10px;
        float: right;
        text-align: center;
        width: 18px;
        height: 18px;
        font-size: $font-size-s;
      }
    }
    .description {
      font-size: $font-size-s;
      color: var(--foreground);
      padding: $padding;
      transition: background-color $anim-duration;
    }
  }
}

.safe-area #snippets {
  @include safe-area(padding-bottom, 10px);
}