@import "partial-name";

$color-variable: #ffffff;

/* I'm here to explain what this class does */
.class-one {
  background-color: $color-variable;
  border: 0;
  line-height: 1.5;
  text-size: 0.5rem;
  transition: background-color 0.5s ease;

  @media (width >= 1px) {
    margin: ($spacing-variable * 2) 1rem;
  }

  &:hover {
    box-shadow: 0 0 2px 1px rgba($color-variable, 0.2);
  }

  &::before {
    content: "hello";
  }
}

$map: (
  "key-1": value-1,
  "key-2": value-2,
);

.class-two {
  @extend %placeholder;
  @include mixin;

  align-items: center;
  display: flex;
  flex: 1 1 auto;
  transition-behavior: allow-discrete;

  a {
    text-decoration: none;

    &:focus,
    &:hover {
      text-decoration: underline;
    }
  }

  &.child {
    color: $red;
  }
}