@import "./variables";

$head-prefix:#{$step-prefix}-header;

ion-step-header {
  display: flex;
  height: 72px;
  overflow: hidden;
  align-items: center;
  padding: 0 24px;

  .#{$head-prefix}-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    flex: none;
    width: $step-circle-w;
    height: $step-circle-h;
    border-radius: $step-circle-r;
    background-color: $step-circle-inactive-background-color;
    color: $step-circle-color;
    transition: background-color 225ms cubic-bezier(0.4, 0.0, 0.2, 1);

    &-error {
      background-color: rgba($step-error-color, 0.38)
    }

    &-active {
      background-color: $step-circle-active-background-color;
      &.#{$head-prefix}-icon-error {
        background-color: $step-error-color;
      }
    }

  }

  .#{$head-prefix}-text-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
    outline: 0;
    cursor: pointer;
    position: relative;
    box-sizing: content-box;
    &.mt {
      margin-top: 14px;
    }
  }

  .#{$head-prefix}-label {
    display: inline-block;
    font-size: $step-label-size;
    color: $step-label-inactive-color;
    min-width: 50px;
    vertical-align: middle;
    width: 100%;
    transition: color 225ms cubic-bezier(0.4, 0.0, 0.2, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    &-error {
      color: rgba($step-error-color, 0.38)
    }

    &-active {
      color: $step-label-active-color;
      &.#{$head-prefix}-label-error {
        color: $step-error-color;
      }
    }
  }

  .#{$head-prefix}-description {
    display: inline-block;
    color: $step-label-inactive-color;
    min-width: 50px;
    vertical-align: middle;
    width: 100%;
    font-size: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &-error {
      color: rgba($step-error-color, 0.38)
    }
  }

}