.conversational-form {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@import "./mixins/cf-mixins";

$cf-color-background: #2C2C2E;
$cf-color-chat-response-user-bg: #E5E6EA;

@import "./conversational-form.scss";


cf-chat-response.robot text > p {
  background: #3A3A3C;
  color: #fff;
  // padding: 13px 21px 13px 21px;
}

cf-chat-response.user text > p {
  background: #E5E6EA;
  color: #303030;
}

cf-chat-response {
  & thumb {
    background-color: inherit;
  }
}

.cf-button {
  border: 1px solid rgba($cf-color-secondary, 1);
  color: $cf-color-secondary;

  &:hover, &:focus {
		// TODO
		&:not(&[selected="selected"]),
		&:not([checked="checked"]) {
			background: $cf-color-secondary;
			color: $cf-color-primary;
		}
	}

	&[selected="selected"], &[checked="checked"] {
		&:not(:focus):not(:hover):not(.highlight) {
			color: $cf-color-primary;
		 	background: $cf-color-secondary;
		}
	}
  
  &.cf-checkbox-button {
    &:hover, &.highlight, &:focus {
      background: $cf-color-secondary;
      color: $cf-color-primary;

      cf-checkbox {
        background: $cf-color-secondary;

        &:after {
          top: relativeValue(.5px);
          left: relativeValue(0px);
          width: relativeValue(10px);
          height: relativeValue(8px);
          background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='13px' height='10px' viewBox='0 0 13 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg transform='translate%28-290.000000, -505.000000%29' fill='" + encodecolor($cf-color-primary) + "'%3e%3cg transform='translate%2884.000000, 136.000000%29'%3e%3cg transform='translate%281.000000, 216.000000%29'%3e%3cg transform='translate%28189.000000, 139.000000%29'%3e%3cpolygon points='17.5 18.5 16 20 20 24 29 15.5 27.5 14 20 21'%3e%3c/polygon%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
        }
      }
    }

    cf-checkbox {
      border-color: $cf-color-secondary;
    }

    &[checked="checked"], &[selected="selected"] {
      background: $cf-color-secondary !important;
      color: $cf-color-primary !important;

      cf-checkbox {
        &:after {
          top: relativeValue(.5px);
          left: relativeValue(0px);
          width: relativeValue(10px);
          height: relativeValue(8px);
          background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='13px' height='10px' viewBox='0 0 13 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg transform='translate%28-290.000000, -505.000000%29' fill='" + encodecolor($cf-color-primary) + "'%3e%3cg transform='translate%2884.000000, 136.000000%29'%3e%3cg transform='translate%281.000000, 216.000000%29'%3e%3cg transform='translate%28189.000000, 139.000000%29'%3e%3cpolygon points='17.5 18.5 16 20 20 24 29 15.5 27.5 14 20 21'%3e%3c/polygon%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e") !important;
        }
      }
    }
  }
}

cf-radio-button.cf-button {
  cf-radio {
    border: 1px solid $cf-color-secondary;
  }

  &:hover, &.highlight, &:focus {
    background: $cf-color-secondary !important;
    color: $cf-color-primary !important;

		cf-radio {
			background: $cf-color-primary;
		}
  }
  
  &[checked="checked"] {
		background: $cf-color-secondary !important;
    color: $cf-color-primary !important;
  }
}

cf-input input, cf-input textarea {
  box-shadow: none;
  border-radius: 3px;
  background-color: #1C1C1E;
  color: #fff;

  &::placeholder {
    color: #777 !important;
  }

  &:focus, &:active {
    box-shadow: none;
  }
}

cf-input-button {
  border-radius: 3px 5px 5px 3px;
  background: #3A3A3C !important;
}

.cf-progressBar {
	background-color: $cf-color-primary;
	
	.bar {
		background-color: lighten($cf-color-secondary, 20%);
	}
}