shubham-cpp / webdev Goto Github PK

.first {
  margin-top: 4px;
  padding: 1rem;
  outline: 4px solid #c4c7c5;
  display: grid;
  gap: 1rem;
  grid-template-columns: 10% 70% 20%;
  --fg-color: white;
  --fg-color2: purple;
  $tactic-name: 2 !default;
  $delete-icon: 3 !default;
  $border-color: var(--fg-color2);

  @mixin children($tactic-name, $delete-icon, $bgColor) {
    --bg-color: $bgColor;
    & > * {
      background: $bgColor;
    }
    @if $tactic-name == 1 {
      grid-template-columns: 80% 20%;
    }
    & > :nth-child(#{$tactic-name}) {
      background: green;
      border: 2px solid $border-color;
    }
    & > :nth-child(#{$delete-icon}) {
      background: purple;
    }
  }
  @include children(2, 3, #ec7875);

  &.two {
    @include children(1, 2, #42a5f5);
  }

  & > * {
    padding: 1rem;
    color: var(--fg-color);
  }
}