.component-color_dropdown {
  display: flex;
  align-items: center;

  .component-dropdown {
    margin-right: calculateRem(20);
  }

  .color-container {
    .color-circle {
      height: calculateRem(30);
      width: calculateRem(30);

      border-radius: 50%;

      background-color: $black;

      &.light {
        background-color: $light;
      }

      &.dark {
        background-color: $dark;
      }

      &.primary-color {
        background-color: $admin-primary-color;
      }

      &.secondary-color {
        background-color: $secondary-color;
      }

      &.tertiary-color {
        background-color: $tertiary-color;
      }

      &.quaternary-color {
        background-color: $quaternary-color;
      }

      &.quinary-color {
        background-color: $quinary-color;
      }
    }
  }
}