.c-icon, hp-icon {
  display: inline-block
}

.c-icon {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  padding: 7px
}

body:not(.c-mouse-event) .c-icon:focus {
  outline: none
}

.c-icon .c-icon-regular-state {
  display: inline-block
}

.c-icon .c-icon-hover-state {
  display: none
}

.c-icon[data-icon-no-hover] .c-icon-regular-state {
  display: inline-block!important
}

.c-icon[data-icon-no-hover] .c-icon-hover-state {
  display: none!important
}

.c-icon-hover-trigger:hover .c-icon-regular-state, .c-icon:hover .c-icon-regular-state {
  display: none
}

.c-icon-hover-trigger:hover .c-icon-hover-state, .c-icon:hover .c-icon-hover-state {
  display: inline-block
}

.c-icon[data-icon^=arrow-][data-icon$=up] {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1)
}

.c-icon[data-icon^=chevron-][data-icon$=right] {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1)
}

.c-icon[data-icon^="collapsible/up"] {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1)
}