@define props {
  type: success, info, warning, error;
}

@alga alert {
  .alert {
    ref: display-flex justifyContent-spaceBetween alignItems-center;
    ref: borderLeft-5px_solid_hexc3c0c0 borderRadius-0.375rem;
    ref: backgroundColor-hexf1ebeb padding-1rem color-hex5c5b5b;
    prefers-dark: backgroundColor-hex2f2f2f color-hexe2e2e2 borderColor-hex828181;
    prefers-toDark: backgroundColor-hex2f2f2f color-hexe2e2e2 borderColor-hex828181;
    prefers-toLight: backgroundColor-hexf1ebeb color-hex5c5b5b borderColor-hexc3c0c0;
    
    .alertContent {
      ref: flexGrow-1;
        
      .alertTitle {
        ref: margin-0_0_7px_0;
      }
        
      .alertText {
        ref: margin-0;
      }
    }
    
    .alertAction {
      ref: cursor-pointer paddingLeft-1rem;
    }
  }
  
  .notification {
    ref: position-fixed top-25px right-25px zIndex-35;
    
    & > * {
      ref: marginBottom-0.5rem;
    }
  }
    
  @if type has success {
    .alert.alertSuccess {
      ref: borderColor-hex008200 backgroundColor-hexbaffba color-hex2d5a2d;
      prefers-dark: backgroundColor-hex1f6a1f color-hexd4ffd4;
      prefers-toDark: backgroundColor-hex1f6a1f color-hexd4ffd4;
      prefers-toLight: backgroundColor-hexbaffba color-hex2d5a2d;
    }
  }
  
  @if type has info {
    .alert.alertInfo {
      ref: borderColor-hex0061eb backgroundColor-hexcde2ff color-hex364150;
      prefers-dark: backgroundColor-hex1d4985 color-hexddebff;
      prefers-toDark: backgroundColor-hex1d4985 color-hexddebff;
      prefers-toLight: backgroundColor-hexcde2ff color-hex364150;
    }
  }
  
  @if type has warning {
    .alert.alertWarning {
      ref: borderColor-hexeb8f00 backgroundColor-hexfce2ba color-hex635540;
      prefers-dark: backgroundColor-hex8e6528 color-hexffedd1;
      prefers-toDark: backgroundColor-hex8e6528 color-hexffedd1;
      prefers-toLight: backgroundColor-hexfce2ba color-hex635540;
    }
  }
  
  @if type has error {
    .alert.alertError {
      ref: borderColor-hexc10202 backgroundColor-hexfec4c4 color-hex5c3939;
      prefers-dark: backgroundColor-hexa53737 color-hexffeaea;
      prefers-toDark: backgroundColor-hexa53737 color-hexffeaea;
      prefers-toLight: backgroundColor-hexfec4c4 color-hex5c3939;
    }
  }
  
  .alertModal {
    ref: position-absolute top-0 left-0 width-100vw height-100vh display-none;
    
    .alertBackdrop {
      ref: position-fixed zIndex-30 inset-0_3em_3em_0 width-100vw height-100vh display-none;
    }
    
    .alertDialog {
      ref: position-fixed zIndex-31 padding-1.5rem display-none;
      
      .alertContent {
        ref: backgroundColor-hexfff color-hex595959 width-500px marginRight-auto marginLeft-auto borderRadius-0.375rem;
        ref-boxShadow: 0 5px 22px 0 rgba(0,0,0,0.2);
        prefers-dark: backgroundColor-hex2f2f2f color-hexe2e2e2 borderColor-hexe2e2e2;
        prefers-toDark: backgroundColor-hex2f2f2f color-hexe2e2e2 borderColor-hexe2e2e2;
        prefers-toLight: backgroundColor-hexfff color-hex595959 borderColor-hexfff;
      }
    }

    &.active,
    &.active .alertBackdrop,
    &.active .alertDialog {
      ref: display-block;
    }
    
    &.active .alertDialog.alertCenter {
      ref: display-grid placeItems-center width-100vw height-100vh;
    }
  }
    
  .alertHeader, .alertFooter {
    ref: display-flex alignItems-center justifyContent-center;
  }

  .alertHeader {
    ref: padding-0.75rem_1rem;
  }
    
  .alertFooter {
    ref: padding-0.75rem_1rem_1.5rem_1rem gap-10px;
    
    .button.alertOkay {
      ref: borderColor-hex98b3d9 backgroundColor-hex6da7f8 color-hexfff fontWeight-bold;
      ref-boxShadow: 0 0 0 1px #fff,0 0 0 3px #accaf5;
    }
    .button.alertOkay:hover {
      ref: backgroundColor-hexaccaf5;
    }
    .button.alertOkay:active {
      ref: backgroundColor-hex438ef6;
    }
    
    .button.alertCancel {
      ref: borderColor-hexdd8f8f backgroundColor-hexfa8585 color-hexfff fontWeight-bold;
      ref-boxShadow: 0 0 0 1px #fff,0 0 0 3px #f9a1a1;
    }
    .button.alertCancel:hover {
      ref: backgroundColor-hexf9a1a1;
    }
    .button.alertCancel:active {
      ref: backgroundColor-hexf95e5e;
    }
  }
    
  .alertBody {
    ref: padding-0.75rem_1rem textAlign-center;
    
    .alertTitle {
      ref: marginTop-0 marginBottom-0 lineHeight-1.5 fontSize-27px marginBottom-0.25rem;
      ref: color-inherit fontWeight-600 textAlign-center;
    }
    
    .alertText {
      ref: textAlign-center margin-0 color-inherit lineHeight-1.5;
    }
  } 
}