@use "sass:color";
@use "variables";

%btn {border-radius:10px;font-family:inherit;margin:0;padding:7px 14px 4px 14px;border:0;cursor:pointer;transition:all .2s; font-size: variables.$fontSize; text-align:center; line-height:1.3em;display:inline-block;text-decoration:none;
  &.has-symbol {display:flex;gap:10px;}
  &.disabled, &:disabled { background:transparent; padding-top:6px; padding-bottom:4px; border:2px solid variables.$grey2; color: variables.$grey2;cursor:not-allowed;
    &:hover {background:transparent; border:2px solid variables.$grey2; color: variables.$grey2;}
  }
}
%btn-secondary {@extend %btn;background: variables.$grey1;color: variables.$grey6;
  &:hover {background: variables.$grey5;color: variables.$grey3;}
}
%btn-primary {@extend %btn;background: variables.$color1;color:#fff;
  &:hover {background: variables.$color1b;color:#fff;}
}
%btn-delete {@extend %btn;background: variables.$color1;color:#fff;
  &:hover {background: variables.$color1b;color:#fff;}
}

%checkboxContainer {position:relative;cursor:pointer;padding-left:20px;min-height:20px;min-width:20px;
  input[type="checkbox"] {opacity:0;width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;margin:0;padding:0;cursor:pointer;
    &:checked {
      + span {background: variables.$color1;border-color: variables.$color1;
        &:before {font-family:"icon";font-style: normal;font-weight: normal !important;vertical-align: top;font-size:1rem;color:#fff;position: absolute;left: 1px;top: -2px;content:"\f1aa";}
      }
    }
  }
  span {border-radius: 2px;border:1px solid variables.$grey3;width: 20px;height: 20px;position:absolute;top:0;left:0;display:block;}
  .label {margin-left:10px;display:inline-block;}
}

%iconButton {width:38px; height:38px;line-height:38px;border-radius:50%;color:#fff;background: variables.$color1;border:0;padding:0;cursor:pointer;transition:all .3s;
  i {line-height:38px;}
  &:hover {background: variables.$color1b;}
  &.red { background: variables.$color4;
    &:hover {background: color.adjust(variables.$color4, $lightness: 10%);}
  }
  &.green { background: variables.$color5;
    &:hover {background: color.adjust(variables.$color5, $lightness: 10%);}
  }
}

%loadingIndicator {display: inline-block;position: absolute;width: 64px;height: 64px;top:50%;left: 50%;margin-left: -32px; margin-top:-32px;
  div {position: absolute;top: 27px;width: 11px;height: 11px;border-radius: 50%;background: variables.$color1;animation-timing-function: cubic-bezier(0, 1, 1, 0);
    &:nth-child(1) {left: 6px;animation: lds-ellipsis1 0.6s infinite;}
    &:nth-child(2) {left: 6px;animation: lds-ellipsis2 0.6s infinite;}
    &:nth-child(3) {left: 26px;animation: lds-ellipsis2 0.6s infinite;}
    &:nth-child(4) {left: 45px;animation: lds-ellipsis3 0.6s infinite;}
  }
}

%modal-btn {
  @extend %btn; background: variables.$grey3;color:#fff;
  &:hover {background: variables.$grey2;}
}
%modal-btn-primary {@extend %modal-btn;background: variables.$color2b;color:#fff;
  &:hover {background: variables.$color2;}
}

%textfield {background: variables.$grey1;border:1px solid variables.$grey1;border-radius:10px;margin:0;box-shadow:none;padding:5px 14px;font-size:1rem;line-height:1.6em;width:100%;font-family:inherit;transition:all 200ms;
  &:focus {background:#fff;}
}
%textarea {@extend %textfield;resize:none;min-height:8em;}

%select {

}