@import '../../lib/commonStyles/colors';
@import '../../lib/commonStyles/full-size';
@import '../../lib/commonStyles/fonts';

.root {
  @include full-size;
  box-sizing: border-box;
}

.backHeader {
  height: 44px;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  font-weight: 500;
}

.headerTitle {
  line-height: 40px;
}

.flipContainer {
  width: 100%;
  height: 100%;
}

.radioGroup {
  height: 60%;
  overflow-y: auto;
}

.buttonGroup {
  height: 35%;
  margin-top: 5%;
  text-align: center;

  .button {
    display: inline-block;
    width: calc(100% / 6);
    height: 29%;
    margin: 0 20px 0 20px;
  }

  .flipButton {
    circle {
      stroke: $primary-color;
      opacity: 0.3;
      &:hover {
        opacity: 0.6;
      }
    }

    path {
      fill: $primary-color;
    }

    &.disabled {
      g {
        cursor: not-allowed;
      }

      circle {
        opacity: 1;
        stroke: $smoke;
      }

      path {
        fill: $smoke;
      }
    }
  }

  .completeButton {
    circle {
      stroke: $primary-color;
      fill: $primary-color;
      opacity: 1;
    }

    path {
      fill: #ffffff;
    }

    &.disabled {
      g {
        cursor: not-allowed;
      }

      circle {
        opacity: 1;
        fill: $smoke;
        stroke: $smoke;
      }
    }
  }
}