@import 'src/styles/variables';

.button {
  flex: 1;
}

.card {
  padding: $gap;
  flex: 1;
  cursor: pointer;

  &.active {
    outline: 1px solid $color_primary;
  }
}

.title {
  font: $font_12_semibold;
  text-align: left;
  text-transform: uppercase;
  color: $gray_50;
}

.sample {
  @include outer_shadow;

  border-radius: 100%;
  flex: 0 1 24px;
  height: 24px;

  &:not(:last-child) {
    margin-left: -8px;
  }
}

.palette {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
