/**
 * Tixly module for Craft CMS
 *
 * Tixly CSS
 *
 * @author    Thomas Sømoen
 * @copyright Copyright (c) 2019 Thomas Sømoen
 * @link      https://apt.no/
 * @package   TixlyModule
 * @since     1.0.0
 */

.tixly-module-connections tr {
  background: #fbfcfd;
}

.tixly-module-connections tr:nth-child(even) {
  background: #f1f5f8;
}

.tixly-module-connections .tixly-ready,
.tixly-module-connections .tixly-expired {
  display: inline-block;
  border-radius: 20px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  color: white;
  overflow: hidden;
}

.tixly-module-connections .tixly-ready {
  background: #27ae60;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.tixly-module-connections .tixly-expired {
  font-size: 18px;
  line-height: 17px;
  background: #c01b26;
  cursor: help;
}

.tixly-module-connections .tixly-clear {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
}

.tixly-module-connections .tixly-connect .tixly-ready {
  opacity: 1;
}

.tixly-module-connections .tixly-entry .tixly-clear {
  opacity: 1;
  pointer-events: auto;
}

.tixly-module-connections .create {
  text-align: right;
}

.tixly-module-connections .entry .select,
.tixly-module-connections .entry .select select {
  width: 100%;
}

.tixly-module-refresh {
  padding-top: 20%;
  text-align: center;
}

.tixly-module-refresh .progressbar {
  position: relative;
  top: auto;
  left: auto;
  margin: 0 auto;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(365deg);
  }
}

.tixly-module-refresh h2[data-icon='refresh']:before {
  animation-duration: 3s;
  animation-name: rotate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}