@value selectionColor from './colors.module.css';

.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.active {
  background: var(--ui-selection-color) !important;
}

.active,
.active .transitionVariant,
.active .transitionVariant .transitionVariantLabel,
.active .defaultTransition {
  color: var(--ui-on-selection-color);
}

.active .transitionVariantLabel input {
  border-color: var(--ui-on-selection-color);
}

.container {
  position: relative;
  border-radius: rounded(lg);
  margin-bottom: space(0.5);
}

.container:hover {
  background: var(--ui-on-surface-color-lightest);
}

.defaultTransition input,
.input input {
  position: absolute;
  opacity: 0;
  height: 0;
}

.input {
  padding: 10px;
}

.transition {
  display: flex;
}

.transitionLabel,
.transitionVariantLabel {
  margin: 0 !important;
}

.transitionLabel {
  padding: 10px;
}

.transitionVariant {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.transitionVariant .transitionVariantLabel {
  padding: 0 0 10px 10px;
  display: inline-flex;
  align-items: center;
  text-transform: none;
  font-size: 12px;
  font-weight: normal;
  color: var(--ui-on-surface-color-light);
}

.transitionVariantLabel input {
  appearance: none;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin: 0 10px 0 2px;
}

.transitionVariantLabel input:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

.defaultTransition {
}

.container > .defaultTransition {
  position: absolute;
  right: 5px;
  bottom: 5px;
  margin: 0;
}

.container > .defaultTransition .defaultTransitionIcon,
.container > .defaultTransition .markAsDefaultTransitionIcon {
  padding: 5px;
}

.defaultTransitionIcon,
.markAsDefaultTransitionIcon {
  font-size: 18px;
  font-weight: normal;
  padding: 0 10px 10px 5px;
}

.defaultTransitionIcon {
  composes: star from './icons.module.css';
  display: none;
}

.markAsDefaultTransitionIcon {
  composes: starOutlined from './icons.module.css';
  opacity: 0.5;
}

.markAsDefaultTransitionIcon:hover {
  opacity: 1;
}

input:checked + .defaultTransitionIcons .defaultTransitionIcon {
  display: block;
}

input:checked + .defaultTransitionIcons .markAsDefaultTransitionIcon {
  display: none;
}

.upperSection,
.lowerSection,
.upperBackground,
.lowerBackground {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: normal;
}

.upperBackground::before {
  content: "A";
}

.lowerBackground::before {
  content: "B";
}

.upperSection {
  background: var(--ui-primary-color);
}

.lowerSection {
  background: var(--ui-error-color);
}

.container:hover .fade .upperSection {
  animation: FadeA 4s linear infinite;
}
.container:hover .fade .lowerSection {
  animation: FadeB 4s linear infinite;
}

.container:hover .scroll .upperSection,
.container:hover .scroll .lowerSection,
.container:hover .scrollOver .lowerSection,
.container:hover .reveal .upperSection{
  animation: Translate 2s linear infinite;
}

.container:hover .beforeAfter .upperSection {
  animation: Translate 2s linear infinite;
}
.container:hover .beforeAfter .upperSection div {
  animation: TranslateYPositive 2s linear infinite;
}

.animation {
  width: 75px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 5%;
  color: #ffffff;
  text-align: center;
  font-size: 26px;
  overflow: hidden;
}

.fade .animation,
.reveal .animation,
.beforeAfter .animation {
  position: relative;
}

.fade .lowerSection,
.reveal .lowerSection,
.beforeAfter .lowerSection {
  position: absolute;
}

.reveal .upperSection,
.beforeAfter .upperSection,
.fade .upperSection {
  position: absolute;
  z-index: 1;
}

.beforeAfter .upperSection {
  overflow: hidden;
}

@keyframes Translate {
  50% {
    transform: translateY(-100%);
  }
}

@keyframes TranslateYPositive {
  50% {
    transform: translateY(100%);
  }
}

@keyframes FadeA {
  25%,50% {
    opacity: 0;
    visibility: hidden;
  }
  10%, 80% {
    visibility: visible;
  }
}

@keyframes FadeB {
  25%, 50% {
    opacity: 1;
  }
  90% {
    visibility: hidden;
    opacity: 0;
  }
}
