@import "../../../style/mixin.scss";

@include export-module('co-step-menu-theme') {
  .co-step-menu {
    .step-menu-container {
      .step-menu-item {
        .step-menu-item-number {
          background-color: var(--co-inphoto-step-menu-number-background-color);
          color: var(--co-inphoto-step-menu-number-color);
        }

        .step-menu-item-number-active {
          background-color: var(--co-inphoto-step-menu-active-background-color);
        }

        .step-menu-item-label {
          h4 {
            font-size: var(--co-inphoto-font-size-base);
          }
        }

        .step-menu-item-icon {
          @include default-icon(40px, 40px, var(--co-inphoto-step-menu-default-icon-color))
        }
      }

      .step-finished {
        .step-menu-item-finished {
          border: 1px solid var(--co-inphoto-step-menu-finished-background-color);
          border-radius: 50%;
          @include default-icon(40px, 40px, var(--co-inphoto-step-menu-number-color));

          .co-icon {
            background-color: var(--co-inphoto-step-menu-finished-background-color);
            border-radius: 50%;
          }
        }
      }
    }
  }
}



